使用Bootstrap Tooltip和AngularJS

我正在尝试在我的应用程序中使用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一起工作吗？

为了让工具提示首先工作，你必须在你的代码中初始化它们。忽略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'); }); } }; });

然后，你所要做的就是在要显示工具提示的元素上包含“工具提示”属性：

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

希望有所帮助！

我已经能够提出的最佳解决scheme是在您的元素上包含一个“onmouseenter”属性，如下所示：

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

如果你正在构build一个Angular应用程序，你可以使用jQuery，但是有很多很好的理由试图避免它，而倾向于更多的angular度驱动的范例。您可以继续使用bootstrap提供的样式，但可以使用UI Bootstrap以原生angular度replacejQuery插件

包括Boostrap CSS文件，Angular.js和ui.Bootstrap.js：

 <link href="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>

确保在创build模块时注入了ui.bootstrap ，如下所示：

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

那么你可以使用angular指令来代替jQuery拾取的数据属性：

 <button type="button" class="btn btn-default"   title =“左边的工具提示”data-toggle =“tooltip”data-placement =“left” 
         tooltip =“Tooltip on left”tooltip-placement =“left”>
  工具提示在左边
 </button>

在Plunker演示

避免UI Bootstrap

jQuery.min.js（94kb） + Bootstrap.min.js（32kb）也给你比你需要的更多，比ui-bootstrap.min.js（41kb）多得多。

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

如果你真的只想加载你需要的模块，你可以“创build一个生成”，并从Bootstrap-UI网站上select工具提示。或者你可以探索工具提示的源代码，并select你所需要的。

这里有一个缩小的自定义生成工具提示和模板（6kb）

简单的答案 – 使用UI引导（ 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>

你有包括Bootstrap的JS和jQuery？

 <script src="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/ ）可能没有多less开销。我用我的Angular应用程序，它有一个工具提示指令。尝试使用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指令，对我们来说一直很好。

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

指令：

 // registers native Twitter Bootstrap 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-tooltip作为属性添加到任何带有title元素即可。 Angular会监视title变化，但是否将工具提示处理传递给Bootstrap。

这也允许您使用任何本地引导工具提示选项作为正常Bootstrap方式的data-属性。

标记：

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

显然，这并没有AngularStrap和UI Bootstrap提供的所有精巧的绑定和高级集成，但是如果您已经在Angular应用中使用了Bootstrap的JS，并且您只需要在整个应用中使用基本的工具提示桥，修改控制器或pipe理鼠标事件。

你可以用AngularStrap来做到这一点

是一套原生指令，可以将Bootstrap 3.0+无缝集成到您的AngularJS 1.2+应用程序中。“

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

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

或者只需像这样拉入工具提示function：

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

在Stack Snippets中演示

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

 <link href="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>

您可以使用dynamic单页面应用程序的selector 选项：

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

如果提供了select器，工具提示对象将被委托给指定的目标。实际上，这用于启用dynamicHTML内容以添加工具提示。

你可以像这样创build一个简单的指令：

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

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

 <button my-tooltip></button>

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

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

 <link href="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>

AngularStrap不能在IE8中使用angularjs版本1.2.9，所以如果您的应用程序需要支持IE8，请不要使用它

请记住一件事，如果你想使用引导工具提示在angularjs是脚本的顺序，如果您也使用jquery-ui，它应该是：

jQuery的
jQuery UI
Bootstap

它被尝试和testing

imposroving @aStewartDesign回答：

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

没有必要为jquery，它是一个晚了，但我认为是最高的投票之一，我应该指出这一点。

只有在dynamic分配工具提示时才能阅读

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

我有一个问题，dynamic工具提示并不总是与视图更新。例如，我正在做这样的事情：

这并不一致

 <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并在激活toooltips时删除title属性（有时）。但是，当我的title={{ person.tooltip }}会改变新值不会总是更新到属性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的toolip拾取。
重新激活工具提示

希望这个长长的答案帮助那些可能像我一样挣扎的人。

安装依赖关系：

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

然后，创build一个script.js

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

现在重新启动服务器。

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

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

build议避免在AngularJS上面使用JavaScript代码

使用Bootstrap Tooltip和AngularJS

在Plunker演示

避免UI Bootstrap

在Stack Snippets中演示

只有在dynamic分配工具提示时才能阅读

这并不一致

什么似乎是这个问题

什么工作

AngularJS按属性sorting

ASP.NET MVC 5与AngularJS / ASP.NET WebAPI

AngularJS比jQuery做得更好吗？

是否有可能“观察”属性的变化

使用ngpatternvalidation自然input数字

在AngularJS中处理DOM操作

inline.js中的内联条件

AngularJS错误：$注射器：未知未知的提供者

AngularJS：如何实现一个简单的file upload与多部分forms？

ui-bootstrap-tpls.min.js和ui-bootstrap.min.js有什么区别？