在AngularJS中使用引导工具提示
在AngularJS中使用引导工具提示
提问于 2013-12-19 03:36:58
我正尝试在我的一个应用程序中使用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一起工作吗？
回答 11
Stack Overflow用户
发布于 2014-07-26 01:57:54
为了让工具提示在第一时间工作，你必须在你的代码中初始化它们。暂时忽略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>希望这能有所帮助！
Stack Overflow用户
发布于 2015-04-14 23:49:26
我能想到的最好的解决方案是在元素中包含一个"onmouseenter“属性，如下所示：
<button type="button" class="btn btn-default"
data-placement="left"
title="Tooltip on left"
onmouseenter="$(this).tooltip('show')">
</button>Stack Overflow用户
发布于 2013-12-19 04:13:09
你包括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="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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20666900
复制相关文章
相似问题
腾讯云开发者
