引导 3 弹出窗口与工具提示

Bootstrap 3 popover with tooltip

本文关键字：工具提示 窗口 引导      更新时间：2023-09-26

我有代码：

    <div class="container-fluid">
    <div class="row">
        <div class="col-lg-2 col-lg-offset-10">
            <a href="#" style="display: inline-block" class="pop" data-placement="bottom" ><img src="https://media.licdn.com/mpr/mpr/shrinknp_100_100/p/4/005/079/057/3730ae6.png" alt="img"></a>
        </div>
      </div>
    </div>

和一些JavaScript

    <script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip();
        $('.pop').popover({
            html: true,
            title: '<h4 class="text-primary">Profile</h4>',
            content: '<a data-toggle="tooltip" data-placement="left" title="Preferences" href="#" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-cog"></span></a> <a href="#" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-user"></span></a>',
            trigger: 'focus'
            });
        });
    </script>

但是工具提示不起作用...我认为这是有问题的，因为我从 js 动态返回内容......

您需要的是

弹出窗口创建的回调，因为尝试在创建 DOM 元素之前实例化工具提示将不起作用......

要使回调函数可用，请先扩展弹出框函数： 

var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function() {
    tmp.call(this); if (this.options.callback) {
        this.options.callback();
    }
}

然后，在回调中调用工具提示实例化：

<script>
    $(function () {
        $('.pop').popover({
            html: true,
            title: '<h4 class="text-primary">Profile</h4>',
            content: '<a data-toggle="tooltip" data-placement="left" title="Preferences" href="#" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-cog"></span></a> <a href="#" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-user"></span></a>',
            trigger: 'focus',
            callback: function () {
               $('a[data-toggle="tooltip"]').tooltip();
            }
        });
    });
</script>

PS ：即使与性能无关，也请尝试使用$('a[data-toggle="tooltip"]').tooltip(); 。它将搜索具有此属性的所有"a"标签，而不是整个 DOM...有用，特别是如果你有大量的html。

相关文章：