92

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

4

19 回答 19

154

为了让工具提示首先起作用，您必须在代码中对其进行初始化。暂时忽略 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');
            });
        }
    };
});

然后您所要做的就是在您希望工具提示出现的元素上包含“工具提示”属性：

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

希望有帮助！

于 2014-07-25T17:57:54.113 回答
62

我能想出的最佳解决方案是在您的元素上包含一个“onmouseenter”属性，如下所示：

<button type="button" class="btn btn-default" 
    data-placement="left"
    title="Tooltip on left"
    onmouseenter="$(this).tooltip('show')">
</button>
于 2015-04-14T15:49:25.670 回答
33

简单答案-使用 UI Bootstrap ( 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>
于 2016-06-02T23:40:18.583 回答
28

如果您正在构建一个 Angular 应用程序，您可以使用 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']);

然后你可以使用 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 引导

jQuery.min.js (94kb) + Bootstrap.min.js (32kb)也比你需要的更多，比ui-bootstrap.min.js (41kb)更多。

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

如果你真的只想加载你需要的模块，你可以“创建一个构建”并从Bootstrap-UI 网站选择工具提示。或者，您可以探索工具提示的源代码并挑选出您需要的内容。

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

于 2014-08-04T14:49:34.823 回答
12

您是否包含了 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>
于 2013-12-18T20:13:09.390 回答
8

我编写了一个简单的 Angular 指令，它对我们来说效果很好。

这是一个演示： 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 的更新）

只需将bootstrap-tooltip属性添加到任何带有title. Angular 将监视更改，title但将工具提示处理传递给 Bootstrap。

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

标记：

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

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

于 2015-12-08T23:10:07.463 回答
4

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

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

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

于 2016-01-21T13:19:57.807 回答
4

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

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

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

<button my-tooltip></button>
于 2016-04-12T13:22:59.863 回答
3

您可以使用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>

于 2014-08-11T12:57:49.173 回答
2

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

于 2015-09-29T00:22:20.007 回答
1

仅当您动态分配工具提示时才阅读此内容

IE<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但是，当 mytitle={{ person.tooltip }}更改时，新值并不总是更新到 propertydata-original-title中。我尝试停用工具提示并重新激活它们，销毁它们，直接绑定到这个属性......一切。但是，这些方法中的每一个都不起作用或产生了新问题；例如从我的对象中删除和解除绑定的titleand属性。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更新 s。
  • 如果有一个title不为空的属性（即它已更改），请将其复制到该data-original-title属性中，以便 Bootstrap 的工具栏将其拾取。
  • 重新激活工具提示

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

于 2017-05-29T12:21:31.057 回答
1 

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>

于 2016-05-17T10:21:16.203 回答
1

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

  • jQuery
  • jQuery 用户界面
  • 引导程序

久经考验

于 2016-09-29T11:49:42.843 回答
1

试试工具提示 (ui.bootstrap.tooltip)。请参阅Bootstrap 的 Angular 指令

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

建议避免 AngularJS 之上的 JavaScript 代码

于 2017-11-15T21:01:15.060 回答
1

为了在模型更改时刷新工具提示，我只是使用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
于 2019-03-12T20:48:17.713 回答
0

AngularStrap 不适用于带有 angularjs 版本 1.2.9 的 IE8，因此如果您的应用程序需要支持 IE8，请不要使用它

于 2015-07-17T14:28:21.477 回答
0

改进@aStewartDesign 答案：

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

不需要jquery，它是一个迟到的anwser，但我认为既然是票数最高的，我应该指出这一点。

于 2016-11-28T16:21:31.907 回答
0

安装依赖项：

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

现在重新启动您的服务器。

于 2017-10-25T18:54:04.193 回答
0

由于工具提示功能，您必须告诉 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>
于 2019-12-31T09:19:48.030 回答