在AngularJS中使用Bootstrap Tooltip

我正在尝试在我的应用程序中使用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引导程序，因为它具有超出我所需的功能。但是，如果我只需要包含工具提示，就可以接受。但是，我不知道该怎么做。

有人可以教我如何使AngularJS使用Bootstrap工具提示吗？

为了使工具提示首先起作用，您必须在代码中对其进行初始化。暂时忽略AngularJS，这是使工具提示在jQuery中工作的方式：

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

只要它不是Angular呈现的内容（例如ng-repeat），它也可以在AngularJS应用程序中使用。在这种情况下，您需要编写一条指令来处理此问题。这是一个对我有用的简单指令：

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引导程序（ui.bootstrap.tooltip）

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

1. 安装UI自举 -$ 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>

如果要构建Angular应用程序，则可以使用jQuery，但是有很多充分的理由尝试避免使用jQuery，而采用更多角度驱动的范例。您可以继续使用bootstrap提供的样式，但是可以使用UI Bootstrap将jQuery插件替换为原生的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']);

然后，您可以使用角度指令代替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引导

jQuery.min.js（94kb） + Bootstrap.min.js（32kb）还为您提供了比您需要的更多的东西，并且比ui-bootstrap.min.js（41kb）还多。

而花时间下载模块只是性能的一方面。

如果您真的只想加载所需的模块，则可以“创建构建”并从Bootstrap-UI网站上选择工具提示。或者，您可以浏览工具提示的源代码并选择所需的内容。

这里是一个简短的自定义构建，仅包含工具提示和模板（6kb）

您是否包含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>

我写了一个简单的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'];
    });
  }
});

注意：如果您在上面的第6和11行上使用的是Bootstrap 4，则需要替换tooltip('destroy')为tooltip('dispose')（感谢user1191559的更新）

只需将bootstrap-tooltip属性添加到任何元素即可title。Angular将监视的更改，title否则会将工具提示处理传递给Bootstrap。

这还允许您以常规的Bootstrap方式将任何本机Bootstrap工具提示选项用作data-属性。

标记：

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

显然，这并没有AngularStrap和UI Bootstrap提供的所有详尽的绑定和高级集成，但是如果您已经在Angular应用程序中使用了Bootstrap的JS，并且只需要跨整个应用程序的基本工具提示桥，则这是一个很好的解决方案修改控制器或管理鼠标事件。

您可以将selector 选项用于动态单页应用程序：

jQuery(function($) {
    $(document).tooltip({
        selector: '[data-toggle="tooltip"]'
    });
});

如果提供了选择器，则工具提示对象将委派给指定的目标。实际上，这用于使动态HTML内容添加工具提示。

您可以创建一个简单的指令，如下所示：

angular.module('myApp',[])
    .directive('myTooltip', function(){
        return {
            restrict: 'A',
            link: function(scope, element){
                element.tooltip();
            }
        }
    });

然后，在需要的地方添加您的自定义指令：

<button my-tooltip></button>

您可以使用AngularStrap做到这一点

是一组本机指令，可将Bootstrap 3.0+无缝集成到AngularJS 1.2+应用程序中。”

您可以像这样注入整个库：

var app = angular.module('MyApp', ['mgcrea.ngStrap']); 

或仅拉入这样的工具提示功能：

var app = angular.module('MyApp', ['mgcrea.ngStrap.tooltip']); 

堆栈片段中的演示

var app = angular.module('MyApp', ['mgcrea.ngStrap']);  

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl.min.js"></script>

<div ng-app="MyApp" class="container" >

  <button type="button" 
          class="btn btn-default" 
          data-trigger="hover" 
          data-placement="right"
          data-title="Tooltip on right"
          bs-tooltip>
    MyButton
  </button>

</div>

最简单的方法，添加$("[data-toggle=tooltip]").tooltip();到有关的控制器。

如果要在angularjs中使用引导工具提示，请记住一件事：如果同时使用jquery-ui，则脚本的顺序也应该是：

• jQuery的
• jQuery UI
• 引导程序

经过尝试和测试

仅当您动态分配工具提示时阅读

即 <div tooltip={{ obj.somePropertyThatMayChange }} ...></div>

我对动态工具提示有疑问，这些提示并非总是随视图更新。例如，我正在做这样的事情：

这并不一致

<div ng-repeat="person in people">
    <span data-toggle="tooltip" data-placement="top" title="{{ person.tooltip }}">
      {{ person.name }}
    </span> 
</div> 

并这样激活它：

$timeout(function() {
  $(document).tooltip({ selector: '[data-toggle="tooltip"]'});
}, 1500)

但是，随着人员阵列的更改，我的工具提示不会总是更新。我在此线程中尝试了所有修复程序，但没有运气。毛刺似乎只发生在大约5％的时间中，几乎不可能重现。

不幸的是，这些工具提示对我的项目至关重要，并且显示错误的工具提示可能非常糟糕。

似乎是什么问题

Bootstrap title会将属性的值复制到新属性，data-original-title并title在我激活工具提示时（有时）删除该属性。但是，当my title={{ person.tooltip }}更改时，新值将不会总是更新到property中data-original-title。我尝试停用工具提示，然后重新激活它们，销毁它们，直接绑定到此属性...所有内容。但是，这些都不起作用或产生了新的问题。例如title和data-original-title属性都已从我的对象中删除并取消绑定。

做了什么

也许是我推过的最丑陋的代码，但是它为我解决了这个小而实质的问题。每当工具提示使用新数据更新时，我都会运行以下代码：

$timeout(function() {
    $('[data-toggle="tooltip"]').each(function(index) {
      // sometimes the title is blank for no apparent reason. don't override in these cases.
      if ($(this).attr("title").length > 0) {
        $( this ).attr("data-original-title", $(this).attr("title"));
      }
    });
    $timeout(function() {
      // finally, activate the tooltips
      $(document).tooltip({ selector: '[data-toggle="tooltip"]'});
    }, 500);
}, 1500);

本质上，这里发生的是：

• 等待一段时间（1500毫秒）以完成摘要周期，然后title更新。
• 如果某个title属性不为空（即已更改），则将其复制到该data-original-title属性，以便Bootstrap的工具提示将其拾取。
• 重新激活工具提示

希望这个长答案能对像我一样一直挣扎的人有所帮助。

尝试工具提示（ui.bootstrap.tooltip）。请参阅Bootstrap的Angular指令

<button type="button" class="btn btn-default" tooltip-placement="bottom" uib-tooltip="tooltip message">Test</button>

建议避免在AngularJS顶部使用JavaScript代码

为了在模型更改时刷新工具提示，我只是用data-original-title代替title。

例如

<i class="fa fa-gift" data-toggle="tooltip" data-html="true" data-original-title={{getGiftMessage(gift)}} ></i>

请注意，我正在初始化这样的工具提示：

<script type="text/javascript">
    $(function () {
        $("body").tooltip({ selector: '[data-toggle=tooltip]' });
    })
</script>

版本：

• AngularJS 1.4.10
• 引导程序3.1.1
• jQuery的：1.11.0

AngularStrap在Angularjs 1.2.9版的IE8中不起作用，因此如果您的应用程序需要支持IE8，则不要使用它

改善@aStewartDesign答案：

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

不需要jquery，它是一个较晚的答案，但我认为这是投票率最高的一个，我应该指出这一点。

安装依赖项：

npm install jquery --save
npm install tether --save
npm install bootstrap@version --save;

接下来，在您的angular-cli.json中添加脚本

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "script.js"
    ]

然后，创建一个script.js

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

现在重新启动服务器。

由于具有工具提示功能，因此您必须告诉angularJS您正在使用jQuery。

这是您的指令：

myApp.directive('tooltip', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('mouseenter', function () {
                jQuery.noConflict();
                (function ($) {
                    $(element[0]).tooltip('show');
                })(jQuery);
            });
        }
    };
});

这就是使用指令的方法：

<a href="#" title="ToolTip!" data-toggle="tooltip" tooltip></a>