在 AngularJS 中使用 Bootstrap 工具提示 [英] Using Bootstrap Tooltip with AngularJS

问题描述

我正在尝试在我的应用程序中使用 Bootstrap 工具提示.我的应用程序正在使用 AngularJS 目前，我有以下内容:

I am trying to use the Bootstrap tooltip in an app of mine. My app is using AngularJS Currently, I have the following:

<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 引导程序，因为它比我需要的更多.但是，如果我必须只包含工具提示部分，我会对此持开放态度.然而，我无法弄清楚如何做到这一点.

However, I'm not sure. Even when I add the line above though, my code doesn't work. I'm trying to avoid using UI bootstrap as it has more than I need. However, if I had to include just the tooltip piece, I'd be open to that. Yet, I can't figure out how to do that.

谁能告诉我如何让 Bootstrap 工具提示与 AngularJS 一起工作?

Can someone show me how to get the Bootstrap Tooltip working with AngularJS?

推荐答案

为了首先使工具提示起作用，您必须在代码中初始化它们.暂时忽略 AngularJS，这就是让工具提示在 jQuery 中工作的方式:

In order to get the tooltips to work in the first place, you have to initialize them in your code. Ignoring AngularJS for a second, this is how you would get the tooltips to work in jQuery:

$(document).ready(function(){
    $('[data-toggle=tooltip]').hover(function(){
        // on mouseenter
        $(this).tooltip('show');
    }, function(){
        // on mouseleave
        $(this).tooltip('hide');
    });
});

这也适用于 AngularJS 应用程序，只要它不是由 Angular 呈现的内容(例如:ng-repeat).在这种情况下，您需要编写一个指令来处理这个问题.这是一个对我有用的简单指令:

This will also work in an AngularJS app so long as it's not content rendered by Angular (eg: ng-repeat). In that case, you need to write a directive to handle this. Here's a simple directive that worked for me:

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

然后你所要做的就是在你希望工具提示出现的元素上包含工具提示"属性:

Then all you have to do is include the "tooltip" attribute on the element you want the tooltip to appear on:

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

希望有帮助！

这篇关于在 AngularJS 中使用 Bootstrap 工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！