我正在尝试在我的应用程序中使用引导程序tooltip。目前，我有以下内容：引导工具提示未显示

<button type="button" class="btn btn-default" 
     data-toggle="tooltip" data-placement="left" 
     title="Tooltip on left"> 
      Tooltip on left 
</button>

不幸的是，我的工具提示未显示。我试图弄清楚我做错了什么。我知道它可以通过JavaScript创建。不过，我试图以声明的方式定义我的工具提示。我已经确认包含了Tooltip.js文件。但是，我无法弄清楚我做错了什么。

是否可以在纯声明的意义上使用工具提示？如果是这样，有人可以通过JSFiddle或Bootply示例告诉我如何？我真的在这一块上敲了敲头。

来源

2013-12-12 user2871401

不，不可能以纯声明的方式使用工具提示。从Docs：

Opt-in functionality:
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

所以你必须调用.tooltip()在JavaScript手动这样的：任何你想要的选择

$("[data-toggle=tooltip]").tooltip();

或使用。

Working Demo in jsFiddle

应该看看哪些是这样的：

screenshot

来源

2013-12-13 13:24:31 KyleMit

虽然小提琴不使用AngularJS。这是我的问题的一部分。 – user2871401

您应该能够以完全相同的方式处理工具提示。由于AngularJS不在你的问题的任何地方，我建议把这个标记为已解决，并打开一个新的问题，以尽可能少的代码重现你的特定问题。 – KyleMit

我照你的要求做了。我将这个问题标记为已解决。我开了一个新的问题。该问题可以在http://stackoverflow.com/questions/20666900/using-bootstrap-tooltip-with-angularjs找到。感谢您的帮助。 – user2871401

在我的项目我有.btn组类和3类与BTN 'A' 的元素一个div。自举的官方代码初始化不工作（我使用Twitter.Bootstrap.less，我不知道，如果让任何性差异）：

$(function({ 
    $('[data-toggle="tooltip"]').tooltip(); 
});

然后我发现了另一个计算器的解决方案通过ImaJedi4ever回答工作像为我的魅力，以初始化所述引导工具提示：

$(function(){ 
    $('body').tooltip({ selector: '[data-toggle="tooltip"]' }); 
});

来源

2015-10-08 14:29:39 NerdKvothe

当初显示在用反应和自举4阿尔法流星它的问题。这工作就像一个魔术！

componentDidMount() { 
    $(function(){ 
     $('body').tooltip({ selector: '[data-toggle="tooltip"]' }); 
    }); 
},

来源

2016-03-10 07:45:50 phongyewtong

引导工具提示未显示

回答

Working Demo in jsFiddle

相关问题