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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 01:13:18  来源:igfitidea点击:

Bootstrap Tooltip Not Showing Up

jquerytwitter-bootstraptooltip

提问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:

应该是这样的:

screenshot

截屏

回答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"]' });
    });
},