在AngularJS中使用Bootstrap工具提示

为了使工具提示首先起作用,您必须在代码中初始化它们.忽略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>

希望有所帮助!

我能想到的最好的解决方案是在你的元素上包含一个"onmouseenter"属性,如下所示:

<button type="button" class="btn btn-default" 
    data-placement="left"
    title="Tooltip on left"
    onmouseenter="$(this).tooltip('show')">
</button>

简单的答案 - 使用UI Bootstrap(ui.bootstrap.tooltip)

这个问题似乎有很多非常复杂的答案.这对我有用.

安装UI Bootstrap -$ bower install angular-bootstrap

将UI Bootstrap注入为依赖项 - angular.module('myModule', ['ui.bootstrap']);

在html中使用uib-tooltip指令.

<button class="btn btn-default"
        type="button"
        uib-tooltip="I'm a tooltip!">
     I'm a button!
</button>

我写了一个简单的Angular Directive,它对我们来说效果很好.

这是一个演示:http://jsbin.com/tesido/edit？html,js,output

指令(用于Bootstrap 3):

// registers native Twitter Bootstrap 3 tooltips
app.directive('bootstrapTooltip', function() {
  return function(scope, element, attrs) {
    attrs.$observe('title',function(title){
      // Destroy any existing tooltips (otherwise new ones won't get initialized)
      element.tooltip('destroy');
      // Only initialize the tooltip if there's text (prevents empty tooltips)
      if (jQuery.trim(title)) element.tooltip();
    })
    element.on('$destroy', function() {
      element.tooltip('destroy');
      delete attrs.$$observers['title'];
    });
  }
});

注意:如果您使用的是Bootstrap 4,则在上面的第6行和第11行,您需要替换tooltip('destroy')为tooltip('dispose')(感谢user1191559为此upadate)

只需添加bootstrap-tooltip一个属性到任何元素title.Angular将监视对其的更改,title但是否会将工具提示处理传递给Bootstrap.

这也允许您以正常的Bootstrap方式使用任何本机Bootstrap Tooltip Options作为data-属性.

加价:

<div bootstrap-tooltip data-placement="left" title="Tooltip on left">
        Tooltip on left
</div>

很明显,这并没有AngularStrap和UI Bootstrap提供的所有精心设计的绑定和高级集成,但如果您已经在Angular应用程序中使用Bootstrap的JS而且只需要在整个应用程序中使用基本的工具提示桥,那么这是一个很好的解决方案.修改控制器或管理鼠标事件.

你有没有包含Bootstrap JS和jQuery？

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

如果你还没有加载那些,那么Angular UI(http://angular-ui.github.io/bootstrap/)可能没有多少开销.我在我的Angular应用程序中使用它,它有一个Tooltip指令.尝试使用tooltip="tiptext"

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