使用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 )

这个问题似乎有一堆非常复杂的答案。 这是为我工作的。

  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> 

你有包括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 。 我尝试停用工具提示,并重新激活它们,销毁它们,直接绑定到这个属性…一切。 然而,这些都不是工作或创造新的问题; 如titledata-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代码