jQuery Bootstrap 工具提示未显示
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/20545745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Tooltip Not Showing Up
提问by user2871401
I am trying to use the Bootstrap tooltipin an app of mine. Currently, I have the following:
我正在尝试在我的应用程序中使用 Bootstrap工具提示。目前,我有以下几点:
<button type="button" class="btn btn-default"
data-toggle="tooltip" data-placement="left"
title="Tooltip on left">
Tooltip on left
</button>
Unfortunately, my tooltip is not showing. I'm trying to figure out what I'm doing wrong. I know that it can be created via JavaScript. However, I'm trying to define my tooltip declaratively. I've confirmed that the Tooltip.js file is being included. However, I can't figure out what I'm doing wrong.
不幸的是,我的工具提示没有显示。我试图弄清楚我做错了什么。我知道它可以通过 JavaScript 创建。但是,我正在尝试以声明方式定义我的工具提示。我已经确认包含 Tooltip.js 文件。但是,我无法弄清楚我做错了什么。
Is it possible to use a tooltip in a pure declarative sense? If so, can someone show me how via a JSFiddle or Bootply sample? I'm really banging my head on this one.
是否可以在纯粹的声明意义上使用工具提示?如果是这样,有人可以通过 JSFiddle 或 Bootply 示例向我展示如何操作吗?我真的很头疼这个。
回答by KyleMit
No, it is not possible to use the tooltip in a pure declarative sense. From the Docs:
不,不可能在纯粹的声明意义上使用工具提示。从文档:
Opt-in functionality:
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
选择加入功能:
出于性能原因,Tooltip 和 Popover data-apis 是选择加入的,这意味着您必须自己初始化它们。
So you must call .tooltip()
manually in JavaScript like this:
所以你必须.tooltip()
像这样在 JavaScript 中手动调用:
$("[data-toggle=tooltip]").tooltip();
Or use whatever selector you want.
或者使用您想要的任何选择器。
Working Demo in jsFiddle
jsFiddle 中的工作演示
Which should look like this:
应该是这样的:
回答by NerdKvothe
In my project I have a div with .btn-group class and 3 'a' elements with class btn. Initializing with Bootstrap official code doesn't worked (I'm using Twitter.Bootstrap.less, I don't know if makes any diference):
在我的项目中,我有一个带有 .btn-group 类的 div 和带有类 btn 的 3 个“a”元素。用 Bootstrap 官方代码初始化没有用(我用的是 Twitter.Bootstrap.less,不知道有没有区别):
$(function({
$('[data-toggle="tooltip"]').tooltip();
});
Then I found a solution on another StackOverFlow Answered by ImaJedi4ever that work like a charm for me, to initialize the bootstrap tooltip:
然后我在 ImaJedi4ever 回答的另一个 StackOverFlow 上找到了一个解决方案,它对我来说就像一个魅力,初始化引导工具提示:
$(function(){
$('body').tooltip({ selector: '[data-toggle="tooltip"]' });
});
回答by phongyewtong
Had a problem showing it in meteor with react and bootstrap 4 alpha. this works like a magic!
在带有 react 和 bootstrap 4 alpha 的流星中显示它时出现问题。这就像一个魔术!
componentDidMount() {
$(function(){
$('body').tooltip({ selector: '[data-toggle="tooltip"]' });
});
},