在AngularJS中使用Bootstrap工具提示

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

希望有所帮助!

Answer 2

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

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

Answer 3

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

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

1. 安装UI Bootstrap -$ bower install angular-bootstrap

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

3. 在html中使用uib-tooltip指令.

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

Answer 4

如果你正在构建一个Angular应用程序,你可以使用jQuery,但有很多很好的理由试图避免它支持更多角度驱动的范例.您可以继续使用bootstrap提供的样式,但可以使用UI Bootstrap将jQuery插件替换为native angular

包括Boostrap CSS文件,Angular.js和ui.Bootstrap.js:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.angularjs.org/1.2.20/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

确保ui.bootstrap在创建模块时注入了这样的:

var app = angular.module('plunker', ['ui.bootstrap']);

然后你可以使用angular指令而不是jQuery拾取的数据属性:

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

在Plunker演示

避免UI Bootstrap

jQuery.min.js(94kb) + Bootstrap.min.js(32kb)也为你提供了超过你需要的东西,比ui-bootstrap.min.js(41kb)更多.

下载模块所花费的时间只是性能的一个方面.

如果您真的只想加载所需的模块,可以"创建构建"并从Bootstrap-UI网站中选择工具提示.或者,您可以浏览工具提示的源代码并选择您需要的内容.

这里是一个缩小的自定义构建,只有工具提示和模板(6kb)

Answer 5

你有没有包含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>

Answer 6

我写了一个简单的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而且只需要在整个应用程序中使用基本的工具提示桥,那么这是一个很好的解决方案.修改控制器或管理鼠标事件.