Bootstrap工具提示不起作用

Bootstrap tooltips not working

我在这里疯了。

我有以下HTML：

test

引导样式的工具提示拒绝显示，只是一个普通的工具提示。

我的bootstrap.css运行得很好，我可以看到里面的类

我的HTML文件末尾有所有相关的JS文件：

1
2
3
4
5

我已经查看了引导程序示例的源代码，在其中的任何地方都看不到启动工具提示的任何内容。所以我猜这应该是有效的，还是我错过了一些重要的东西？

我有模态和警报，还有其他的功能都很好，所以我不是一个十足的白痴；)

谢谢你的帮助！

相关讨论

总结：使用jquery选择器激活工具提示

1
2
3
4

实际上，您不需要使用属性选择器，您可以在任何元素上调用它，即使它的标记中没有rel="tooltip"。

相关讨论

对于使用Rails的用户，这已经在使用$(".tooltip").tooltip()的bootstrap.js.coffee中定义。只要确保在你的application.js中包含//= require bootstrap。
将class.tooltip添加到任何元素都会破坏我的工具提示。如果我能用鼠标找到隐藏的元素，工具提示将隐藏并显示工具提示。使用任何其他选择器或类名都可以。
@没错，引导程序为.tooltip定义样式，默认情况下，它们是不可见的。不过，您可以使用rel属性或任何其他类作为选择器。
是的，您需要HTML标记和JS选择器。这些不是应用工具提示的替代方法。
有些可能试图以模式显示工具提示，但这在所有引导版本中都不起作用。如果你在一个正常的页面中尝试，而不是模式，并且它可以工作，那么你知道这就是问题所在。
尝试从使用Ajax加载的页面运行工具提示时，也可能会遇到问题。在页面中没有用Ajax动态加载的部分进行尝试，然后看看它是否可以工作。
谢谢你！如果我一次初始化所有工具，如何为一些工具提示定义另一个方向？即使在标记属性中也可以设置选项吗？
明白了：我使用$("[rel='tooltip-bottom']")、tooltip(placement:'bottom')、accarding属性值rel="tooltip bottom"或easyer添加data placement="bottom"标记。
@你能更具体点吗？什么版本的Rails，或者什么gem，在后台初始化引导工具提示？我在Rails3.2.17中看到它使用了boostrap-sass-3.1.1.0，但是我找不到任何代码行可以做到这一点。
@老实说，我不记得了——这是1.5年前的事了。当时我们使用的代码是：github.com/maphub/maphub-portal
谢谢您.我认为你指的是一个不同于引导Sass的宝石。也许是Twitter引导程序？我认为我看到的是Chrome的本地工具提示功能，而不是任何JS库。
我被引导文档弄糊涂了；我认为您不需要JavaScript，只需要数据属性。
谢谢@manuel你的建议为我修改了工具提示。我之前用的是Rails 4.2，我在application.js中需要引导程序，但没有用。另外，我发现我需要在HTML中声明rel="tooltip"，否则JS函数将无法工作。

在遇到同样的问题之后，我发现这个解决方案是有效的，不需要在引导程序所需的属性之外添加额外的标记属性。

HTML

1	Hyperlink Text

JQuery

1
2
3

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

希望这有帮助！

相关讨论

您不需要单独使用所有JS文件

如果要使用所有引导函数，只需使用以下文件：

1 2	-bootstrap.css -bootstrap.js

两者都可以在http://twitter.github.com上找到。最后-jquery.js的最新版本

对于字形图标，您需要图像

GlyphIcons-Halfings.png和/或GlyphIcons Halfings White.png(白色图像)你需要上传到u r网站的/img/文件夹中(或)将其存储在你想要的地方，但是更改bootstrap.css中的文件夹目录。

对于工具提示，您需要在标签

1
2
3
4
5
6

就是这样…

http://getbootstrap.com/javascript/工具提示用法

选择加入功能出于性能原因，工具提示和弹出数据API是可选的，这意味着

you must initialize them yourself.

初始化页面上所有工具提示的一种方法是通过它们的数据切换属性来选择它们：

1
2
3

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

将这段代码放入HTML中可以使用工具提示

实例：

1
2
3
4
5

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


Hover over me

相关讨论

我知道这是一个老问题，但是由于我在新版本的引导程序中遇到了这个问题，并且在网站上还不清楚，下面是如何启用工具提示。

给元素一个类似"工具提示测试"的类

然后在javascript标记中激活这个类：

1
2
3
4
5

相关讨论

HTML

1	Hyperlink Text

JQuery

1
2
3

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

这个对我有用。

相关讨论

如果您按照其他答案的建议执行$("[rel='tooltip']").tooltip();，那么您将仅对当前在DOM中的元素激活工具提示。这意味着，如果要更改DOM并稍后插入动态内容，它将无法工作。此外，这种方法效率要低得多，因为它为单个元素安装事件处理程序，而不是使用jquery事件委托。因此，我发现激活引导工具提示的最佳方法是将这一行代码放入文档中，然后将其忽略：

1	$(document.body).tooltip({ selector:"[title]" });

注意，我使用title作为选择器，而不是rel=title或data-title。这有一个优点，即它可以应用于许多其他元素(rel应该只用于锚)，而且对于旧浏览器来说，它还可以作为"回退"使用。

另外请注意，如果使用上述代码，则不需要data-toggle="tooltip"属性。

引导工具提示很昂贵，因为您需要处理每个元素上的鼠标事件。这就是他们默认情况下没有启用它的原因。所以，如果您决定在上面一行注释，那么如果您使用标题属性，您的页面仍然可以工作。

如果您确定不使用title属性，那么我建议您使用纯CSS解决方案，如hint.css或检查http://csstoltip.com，它根本不需要任何javascript代码。

相关讨论

这是最简单的方法。把这个放在之前：

1 2	<script type="text/javascript"> $("[data-toggle="tooltip"]").tooltip();

查看引导程序文档中关于工具提示的示例。

例如：

1
2
3
4

<a href="#"
data-toggle="tooltip"
data-placement="bottom"
title="Tooltip text here">Link with tooltip

相关讨论

工具提示和弹出窗口不仅是像DropDown或ProgressBar这样的CSS插件。要使用工具提示和弹出窗口，必须使用jquery(read javascript)激活它们。

所以，假设我们希望在单击HTML按钮时显示一个弹出窗口。

1
2
3
4
5

<a href="#" role="button"
class="btn popovers-to-be-activated"
title="" data-content="And here's some amazing content."
data-original-title="A Title""
>button

然后需要有以下javascript代码来激活popover：

1	$('.popovers-to-be-activated').popover();

实际上，上面的javascript代码将在所有具有类"要激活的弹出"的HTML元素上激活弹出。

不用说，把上面的javascript放到dom ready回调中，在dom准备好后立即激活所有弹出窗口：

1
2
3
4

$(function() {
// Handler for .ready() called.
$('.popovers-to-be-activated').popover();
});

在head部分，您需要先添加以下代码

1
2
3
4
5
6
7
8
9
10

然后在body部分，您需要编写以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<p>
The data-placement attribute specifies the tooltip position.
</p>
<ul class="list-inline">

<li>
Top
</li>

<li>
Bottom
</li>

<li>
Left
</li>

<li>
Right
</li>

如果仍然没有解决所有问题，请使用最新的jquery库，如果使用最新的bootstrap 2.0.4和jquery-1.7.2.js，则不需要任何jquery选择器。

只需使用EDOCX1[2]

根据您的意愿，在数据放置中使用top/bottom/left/right。

我在header中添加了jquery和bootstrap-tooltip.js。在页脚中添加此代码对我很有用！但是当我在标题中添加相同的代码时，它就不起作用了！

1 2	<script type="text/javascript"> $('.some-class').tooltip({ selector:"a" });

相关讨论

让我们使用一个示例来演示如何将工具提示添加到文档中的任何HTML元素。

注：

如果这些工具提示示例在您将它们放入页面时不起作用，那么您还有另一个问题。你需要看一些东西，比如：

包含脚本的顺序
查看是否试图初始化已删除的HTML元素
查看是否正在尝试调用JS文件中不再包含的方法

查看是否包含提供所需功能的JS文件(不仅仅是工具提示，还包括页面上使用的任何组件)。

1
2
3
4
5
6
7
8
9
10
11
12

<head>
<link rel="stylesheet" href="/Content/bootstrap.css" />
<link rel="stylesheet" href="/Content/animate.css" />
<link rel="stylesheet" href="/Content/style.css" />
</head>
<body>
... your HTML code ...
<script src="/Scripts/jquery-2.1.1.js">
<script src="/Scripts/bootstrap.min.js">
<script src="/Scripts/app/inspinia.js"> 
... your JavaScript initializers ...
</body>

上述任何一项的失败都会(并且经常会)阻止javascript加载和/或运行，这会使一切保持良好和中断。

工作实例

假设你有一个徽章，当用户悬停在它上面时，你希望它显示一个工具提示。

原始HTML：

1	<span class="badge badge-sm badge-plain">Admin Mode</span>

普通引导工具提示

如果您正在为HTML元素创建工具提示，并且您使用的是普通的引导工具提示，那么您将负责使用自己的javascript代码调用工具提示初始值设定项。

以前

1	<span class="badge badge-sm badge-plain">Admin Mode</span>

后

1
2
3
4
5
6

<span
class="badge badge-sm badge-plain"
data-toggle="tooltip"
data-placement="right"
title="Tooltip on right"
>Admin Mode</span>

初始化器

1
2
3
4
5
6

// Initialize any Tooltip on this page
$(document).ready(function ()
{
$('[data-toggle="tooltip"]').tooltip();
}
);

引导模板工具提示(如inspinia)

如果您使用的是引导模板(如inspinia)，则包括支持模板功能的脚本：

1	<script src="/Scripts/app/inspinia.js" />

在inspinia的情况下，所包含的脚本在文档加载完成后通过运行以下javascript代码自动初始化所有工具提示：

1
2
3
4
5

// Tooltips demo
$('.tooltip-demo').tooltip({
selector:"[data-toggle=tooltip]",
container:"body"
});

因此，您不必自己初始化inspinia风格的工具提示。但是您必须以特定的方式格式化元素。初始值设定项在class属性中查找tooltip-demo的HTML元素，然后调用tooltip()方法初始化定义了data-toggle="tooltip"属性的任何子元素。

对于我们的示例徽章，在其周围放置一个外部元素(如具有class="tooltip-demo"的或，然后将实际工具提示的data-toggle、data-placement和title属性放在徽章元素内。从上面修改原始HTML，使其看起来像这样：

以前

1	<span class="badge badge-sm badge-plain">Admin Mode</span>

后

1
2
3
4
5
6
7
8

<span class="tooltip-demo">
<span
class="badge badge-sm badge-plain"
data-toggle="tooltip"
data-placement="right"
title="Tooltip on right"
>Admin Mode</span>
</span>

初始化器

None

注意，元素中的任何子元素都将正确准备工具提示。我可以有三个子元素，都需要工具提示，并将它们放在一个容器中。

多个项目，每个项目都有一个工具提示

1
2
3
4
5

最好的用途是将class="tooltip-demo"添加到

或最外面的或中。

使用模板时的普通引导工具提示

如果您使用的是inspinia，但不想添加额外的外部或标记来创建工具提示，则可以使用标准的引导工具提示而不干扰模板。在这种情况下，您将负责自己初始化工具提示。但是，应该在class属性中使用自定义值来标识工具提示项。这将防止工具提示初始值设定项干扰受inspinia影响的元素。在我们的示例中，让我们使用standalone-tt：

以前

1	<span class="badge badge-sm badge-plain">Admin Mode</span>

后

1
2
3
4
5
6

<span
class="standalone-tt badge badge-sm badge-plain"
data-toggle="tooltip"
data-placement="right"
title="Tooltip on right"
>Admin Mode</span>

初始化器

1
2
3
4
5
6

// Initialize MY standalone tooltips, ignoring INSPINIA-affected elements
$(document).ready(function ()
{
$('.standalone-tt').tooltip();
}
);

如果使用rails+haml更容易包含工具提示，只需执行以下操作：

1	= link_to '', some_path(), :class =>"btn btn-success btn-mini icon-plane", :rel =>"tooltip", :title =>"Referential Guide"

这只是在元素末尾添加以下行。

1	:rel =>"tooltip", :title =>"Referential Guide"

相关讨论

我只是补充说：

1	<script src="http://getbootstrap.com/assets/js/docs.min.js">

在bootstrap.min.js下，它可以工作。

在我的特定案例中，它不起作用，因为我包含了两个版本的jquery。一个用于引导，另一个(另一个版本)用于谷歌图表。

当我删除图表的jquery加载时，它工作正常。

必须将工具提示javascript放在HTML之后。这样地：

1
2
3
4
5
6
7

I am Here

$("* [rel='tooltip']").tooltip({
html: true,
placement: 'bottom'
});

或使用$(文档)。就绪：

1
2
3
4
5
6
7
8

$(document).ready(function() {

$("* [rel='tooltip']").tooltip({
html: true,
placement: 'bottom'
});

});

工具提示不起作用，因为您将工具提示HTML放在了javascript之前，所以它们不知道是否存在用于工具提示的javascript。在我看来，剧本是自上而下读的。

如果您正在创建包含带有javascript的工具提示的HTML，然后将其插入文档，则必须在将HTML插入文档后激活popover/tooltip，而不是在文档加载时…

我也遇到过类似的问题，尤其是在按钮容器(如垂直按钮容器)中运行时。在这种情况下，您必须将容器设置为"主体"

1	I have added a jsfiddle example

例子

从工具提示上的引导文档

由于性能原因，工具提示是可选的，因此您必须自己初始化它们。初始化页面上所有工具提示的一种方法是通过数据选择它们-切换属性：

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

将代码放入文档中准备好

1
2
3
4
5

$(document).ready(function () {
if ($("[rel=tooltip]").length) {
$("[rel=tooltip]").tooltip();
}
});

在我的例子中，我还缺少http://twitter.github.com/bootstrap/assets/css/bootstrap.css上的工具提示css类。所以儿子别忘了。

使用工具提示在任何需要的元素处添加data-toggle="tooltip"。

您需要执行以下操作。添加

1
2
3
4

在页面的某个位置编码(最好在部分)。

还可以将EDOCX1[1]添加到您希望使用它启用的任何内容中。

快速而轻松的引导工具提示插件替代方案：

HTML：

1
2
3
4
5
6
7
8
9
10
11

<label class="control-label" for="password">Password</label>

6 characters long, must include letters and numbers

<input type="password" name="password" value="" id="password" autocomplete="off"
class="form-control"
style="width:125px" />

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

JScript：

1
2
3
4
5
6
7
8
9
10
11
12
13

$(".mytooltip").mouseover(function(){
var elm = this.id;
$("#" + elm +"_tttext").fadeIn("slow");
});

var ttTmo;
$(".mytooltip").mouseout(function(){
var elm = this.id;
clearTimeout(ttTmo);
ttTmo = setTimeout(function(){
$("#" + elm +"_tttext").fadeOut("slow");
},3000);
});

标签/文本必须包含在类"MyTooltip"的包装中。此包装必须具有ID。

在标签之后，工具提示文本被包装在类"mytooltiptext"的一个分区中，ID由父包装器的ID+"ttext"组成。可以使用选择器的其他选项。

希望它有帮助。