angularjs - 将 Bootstrap 工具提示与 AngularJS 结合使用

Question

我正在尝试在我的应用程序中使用 Bootstrap 工具提示。我的应用程序正在使用 AngularJS 目前，我有以下内容:

<button type="button" class="btn btn-default" 
        data-toggle="tooltip" data-placement="left"
        title="Tooltip on left">
            Tooltip on left
</button>

我想我需要使用

$("[data-toggle=tooltip]").tooltip();

但是，我不确定。即使我添加上面的行，我的代码也不起作用。我试图避免使用 UI Bootstrap ，因为它的功能超出了我的需要。但是，如果我必须只包含工具提示部分，我会对此持开放态度。然而，我不知道该怎么做。

有人可以告诉我如何让 Bootstrap Tooltip 与 AngularJS 一起使用吗？

Answer 1

为了让工具提示首先发挥作用，您必须在代码中初始化它们。暂时忽略 AngularJS，这就是让工具提示在 jQuery 中工作的方法:

$(document).ready(function(){
    $('[data-toggle=tooltip]').hover(function(){
        // on mouseenter
        $(this).tooltip('show');
    }, function(){
        // on mouseleave
        $(this).tooltip('hide');
    });
});

这也适用于 AngularJS 应用程序，只要它不是由 Angular 渲染的内容(例如:ng-repeat)。在这种情况下，您需要编写一个指令来处理这个问题。这是一个对我有用的简单指令:

app.directive('tooltip', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            element.hover(function(){
                // on mouseenter
                element.tooltip('show');
            }, function(){
                // on mouseleave
                element.tooltip('hide');
            });
        }
    };
});

然后您所要做的就是在您希望工具提示出现的元素上包含“tooltip”属性:

<a href="#0" title="My Tooltip!" data-toggle="tooltip" data-placement="top" tooltip>My Tooltip Link</a>