使用Bootstrap工具提示与AngularJS

发布时间：2020-12-17 23:47:52 所属栏目：安全来源：网络整理

导读：我试图在我的应用程序中使用Bootstrap工具提示。我的应用程序正在使用AngularJS目前，我有以下： button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left" Tooltip on left/button 我想我需要使

我试图在我的应用程序中使用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工具提示使用AngularJS？

解决方法

为了让工具提示首先工作，你必须在代码中初始化它们。忽略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');
            });
        }
    };
});

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

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

希望有所帮助！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!