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

你需要的是弹出窗口创建的回调，因为在创建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();。它将搜索所有＆＃34; a＆＃34;带有此属性的标签而不是整个DOM ...特别是如果你有大量的html。

Bootstrap 3 popover with tooltip

1 个答案: