在 AngularJS 中使用引导工具提示

Posted 2023-02-19

技术标签:

【中文标题】在 AngularJS 中使用引导工具提示【英文标题】：Using Bootstrap Tooltip with AngularJS 【发布时间】：2014-01-07 03:33:18 【问题描述】：

我正在尝试在我的应用程序中使用引导工具提示。我的应用正在使用 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 一起工作？

【问题讨论】：

不使用 Angular-UI Bootstrap，你需要为你的事件做所有的绑定。如果您不想使用 UI Bootstrap，因为它比您需要的更多，您是否考虑过仅加载您确实需要的部分：github.com/angular-ui/bootstrap/tree/master/src/popover 【参考方案1】：

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

【讨论】：

【参考方案2】：

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

【讨论】：

【参考方案3】：

我编写了一个简单的 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 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>

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

【讨论】：

尝试使用它，我得到了一个Error: cannot call methods on tooltip prior to initialization; attempted to call method 'destroy' 错误。 @CD 嗯...我还不能重现那个错误。我将此演示网址添加到答案中：jsbin.com/tesido/edit?html,js,output 如果您知道您的代码有何不同，请告诉我，我会看看是否可以提供帮助。顺便说一下，演示使用的是Angular v1.2、Bootstrap v3.3、jQuery v2.1 谢谢，这是这些示例中唯一一个在标题通过绑定更改时动态更新工具提示的示例。顺便说一句，对于 BS4，您必须在两个地方将 element.tooltip('destroy'); 与 element.tooltip('dispose'); 交换。【参考方案4】：

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

希望有帮助！

【讨论】：

不错的解决方案！我确实将 app.directive 替换为 angular.module('tooltip', []).directive 以使其在我的应用程序中工作。不错的解决方案。我们可以在上面添加一些 css 来更改工具提示吗？可以在调用tooltip show之前添加$(element).tooltip(html: 'true', container: 'body')作为提供自定义选项的示例。 element.tooltip() 可以用来代替 jQuery。多么美丽的答案【参考方案5】：

试试工具提示 (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代码

【讨论】：

【参考方案6】：

安装依赖：

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 而不是 Angular【参考方案7】：

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

即<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 属性（有时）。但是，当我的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 毫秒），让摘要周期完成，然后更新 titles。如果有一个不为空的title 属性（即它已更改），请将其复制到data-original-title 属性中，以便Bootstrap 的工具栏将其拾取。重新激活工具提示

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

【讨论】：

【参考方案8】：

改进@aStewartDesign 答案：

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

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

【讨论】：

【参考方案9】：

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

jQuery jQuery 用户界面引导程序

久经考验

【讨论】：

【参考方案10】：

简单答案 - 使用 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>

【讨论】：

无 jQuery，使用纯 Angular 和 ui-bootstrap；这就是我要找的，谢谢唯一对我有用的解决方案。谢谢！（@Kondal - 是的，它可以在没有 jQuery 的情况下工作）。【参考方案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>

【讨论】：

请在您的回答中添加一些解释。【参考方案12】：

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

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

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

<button my-tooltip></button>

【讨论】：

【参考方案13】：

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

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

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

【讨论】：

【参考方案14】：

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

【讨论】：

【参考方案15】：

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

【讨论】：

【参考方案16】：

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

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

【讨论】：

Boostrap JS 是一个 jQuery 库。至少它在 Bootstrap 3 中。也适用于 Angular 2+。谢谢！【参考方案17】：

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

【讨论】：

【参考方案18】：

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

【讨论】：

感谢@prototype！我打算去@gabeodess 回答，但更喜欢这个解决方案，因为它没有明确说它需要 jQuery，这使得它的耦合度降低了一点，并且在未来更容易改变一个完全角度的解决方案。跨度> 【参考方案19】：

如果您正在构建一个 Angular 应用程序，您可以使用 jQuery，但有很多充分的理由可以避免使用 jQuery，而支持更多的 Angular 驱动范式。您可以继续使用 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>

Demo in Plunker

避免 UI 引导

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

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

如果您真的只想加载您需要的模块，您可以“创建构建”并从Bootstrap-UI website 中选择工具提示。或者您可以探索source code for tooltips 并挑选您需要的东西。

这里是一个缩小的自定义构建，只有 tooltips and templates (6kb)

【讨论】：

值得注意的是，在撰写本文时，v 0.12.1 适用于 Angular 的 v1.2。 0.13 分支将用于 Angular 1.3+，但新的维护者仍在为此工作（并且做得很好！）

以上是关于在 AngularJS 中使用引导工具提示的主要内容，如果未能解决你的问题，请参考以下文章

当用户专注于工具提示内容时，不要隐藏引导工具提示

ajax 设置中的引导选择工具提示仅显示一次