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');
            });
        }
    };
});

然后你所要做的就是包括＆＃34;工具提示＆＃34;您希望工具提示出现在元素上的属性：

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

希望有所帮助！

Answer 2

能够提出的最佳解决方案是包括一个＆＃34; onmouseenter＃34;你的元素属性如下：

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

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

Install UI Bootstrap - $ bower install angular-bootstrap
将UI Bootstrap作为依赖项注入 - angular.module('myModule', ['ui.bootstrap']);
使用html中的uib-tooltip directive。

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

Answer 4

如果您正在构建一个Angular应用程序，那么可以使用jQuery，但是有很多充分的理由试图避免使用jQuery更多角度驱动的范例。您可以继续使用bootstrap提供的样式，但使用UI Bootstrap

替换带有原生角度的jQuery插件

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

Demo in Plunker

避免UI Bootstrap

jQuery.min.js (94kb) + Bootstrap.min.js (32kb)也提供了超出您需要的内容，远远超过ui-bootstrap.min.js (41kb)。

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

如果你真的只想加载你需要的模块，你可以＆＃34;创建一个构建＆＃34;并从Bootstrap-UI website中选择工具提示。或者您可以浏览source code for tooltips并选择您需要的内容。

这是一个缩小的自定义版本，只有tooltips and templates (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行＆amp; 11，您需要将tooltip('destroy')替换为tooltip('dispose')（感谢user1191559 for this 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>

显然，这并不具备所有精心设计的装订＆amp; AngularStrap和UI Bootstrap提供的高级集成，但如果您已经在Angular应用程序中使用Bootstrap的JS，那么它就是一个很好的解决方案，您只需要在整个应用程序中使用基本的工具提示桥，而无需修改控制器或管理鼠标事件。

Answer 7

您可以创建一个这样的简单指令：

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

然后，在必要时添加自定义指令：

<button my-tooltip></button>

Answer 8

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

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

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

Answer 9

您可以使用AngularStrap

执行此操作

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

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

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

或者只提取工具提示功能：

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

Stack Snippets中的演示

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 10

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

Answer 11

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>

Answer 12

请记住，如果你想在angularjs中使用bootstrap工具提示是你的脚本的顺序，如果你也使用jquery-ui，它应该是：

的jQuery
jQuery UI
Bootstap

经过试用和测试

Answer 13

如果您动态分配工具提示，则只读取此内容

即。 <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％的时间，并且几乎不可能重复。

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

似乎是什么问题

当我激活toooltips时，Bootstrap正在将title属性的值复制到新属性data-original-title并删除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的工具提取。
重新启用工具提示

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

Answer 14

尝试工具提示（ui.bootstrap.tooltip）。见Angular directives for Bootstrap

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

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

Answer 15

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

Answer 16

证明@aStewartDesign答案：

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

没有必要使用jquery，它是一个较晚的版本，但我认为它是最受欢迎的版本，我应该指出这一点。

Answer 17

安装依赖项：

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();

现在重启你的服务器。

Answer 18

用于在模型更改时刷新工具提示，我只使用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

Answer 19

由于使用了工具提示功能，您必须告诉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>

在AngularJS中使用Bootstrap工具提示

19 个答案:

Demo in Plunker

避免UI Bootstrap

Stack Snippets中的演示

如果您动态分配工具提示，则只读取此内容

这不能始终如一地运作

似乎是什么问题

做了什么