具有工具提示的Bootstrap 3 Popover

Question

I have code:

    <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>

and some 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>

but tooltip doesn't work... I think that is problem because I return dynamically content from js...

Answer 1

What you need is a callback on the popover creation, because trying to instantiate the tooltip before the DOM element is created will not work...

To make a callback function available, extend the popover function first :

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

Then, call your tooltip instantiation in the 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 : Even if it is not about performance, try to use $('a[data-toggle="tooltip"]').tooltip(); . It will search all the "a" tags with this attribute instead of the whole DOM... Useful especially if you have a ton of html.