我正在尝试在我的应用程序中使用 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 ,因为它的功能超出了我的需要。但是,如果我必须只包含工具提示部分,我会对此持开放态度。然而,我不知道该怎么做。
有人可以告诉我如何让 Bootstrap Tooltip 与 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>
关于angularjs - 将 Bootstrap 工具提示与 AngularJS 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20666900/