具有工具提示的Bootstrap 3 Popover

Question

我有代碼：

    <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動態返回內容...

Answer 1

您需要的是在popover創建上的回調，因為嘗試在創建DOM元素之前實例化工具提示將不起作用...

要使回調函數可用，請首先擴展popover函數：

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(); 。 它將使用此屬性而不是整個DOM搜索所有的“ a”標簽...很有用，尤其是在您擁有大量html的情況下。