使用带有AngularJS引导工具提示 [英] Using Bootstrap Tooltip with AngularJS

问题描述

我试图使用引导提示在我的应用程序。我的应用程序使用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();

不过，我不知道。即使当我添加上述尽管行，我的code不起作用。我试图避免使用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.

能否有人告诉我怎么去引导程序工具提示使用AngularJS工作？

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

推荐答案

为了得到提示要摆在首位的工作，你必须初始化它们在你的code。忽略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');
    });
});

（：NG-重复EG）

这也将在AngularJS应用程序，只要它不是通过角呈现的内容合作。在这种情况下，你需要写一个指令来处理这个问题。下面是为我工作一个简单的指令：

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引导工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！