引导工具提示不工作

我快疯了。

我有以下HTML:

<a href="#" rel="tooltip" title="A nice tooltip">test</a>

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

我有bootstrap。css工作得很好，我可以看到里面的类

我已经在我的HTML文件的末尾得到了所有相关的JS文件:

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>

我已经查看了Bootstrap示例的源代码，在那里的任何地方都看不到任何启动工具提示的东西。所以我猜它应该可以工作，还是我错过了一些重要的东西?

我有模态和警报和其他东西工作得很好，所以我不是一个完全的白痴;)

谢谢你的帮助!

467009 次浏览
小开

总而言之:使用jQuery选择器激活工具提示

<script type="text/javascript">
$(function () {
$("[rel='tooltip']").tooltip();
});
</script>

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

小开

我已经在头部添加了jquery和bootstrap-tooltip.js。在脚注中添加此代码对我有用!但是当我在标题中添加相同的代码时，它不起作用!

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

将代码放入文档中

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

在我的情况下，我也错过了工具提示css类上http://twitter.github.com/bootstrap/assets/css/bootstrap.css 所以别忘了。

小开

你不需要分开所有的js文件

如果你打算使用所有的引导函数，只需使用以下文件:

-bootstrap.css
-bootstrap.js

它们都可以在http://twitter.github.com
中找到 最后,< br > -最新版本的jquery.js

.js

对于Glyphicons你需要图像

glyphicons-halfings.png和/或glyphicons-halfings-white.png(白色图像)
.png 你需要上传你的网站的/img/文件夹(或)存储在任何你想要的地方，但改变文件夹目录在bootstrap.css

为工具提示你需要在你的 <head> </head>标记< / p > 

  <script type='text/javascript'>
$(document).ready(function () {
if ($("[rel=tooltip]").length) {
$("[rel=tooltip]").tooltip();
}
});
</script>

就是这样……

小开

使用最新的Jquery库，如果你使用最新的bootstrap 2.0.4和Jquery -1.7.2.js，你不需要任何Jquery选择器

只需使用rel="tooltip" title="Your Title" data-placement=" "即可

根据您的意愿在数据放置中使用顶部/底部/左/右。

小开

如果使用Rails+Haml更容易包含工具提示，请执行以下操作:

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

这就是在元素的末尾添加下面的行。

:rel => "tooltip", :title => "Referential Guide"
小开

在我的特殊情况下，它没有工作，因为我包含了两个版本的jQuery。一个用于引导，另一个(另一个版本)用于谷歌图表。

当我移除图表的jQuery加载时，它工作得很好。

小开

工具提示和弹出窗口不仅仅是css插件，比如下拉菜单或进度条。要使用工具提示和弹出窗口，你必须使用jquery(阅读javascript)激活它们。

假设我们想要在点击html按钮时显示一个弹出窗口。

<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</a>

然后你需要有以下javascript代码来激活弹出窗口:

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

实际上，上面的javascript代码将在所有具有类“popover -to- activated”的html元素上激活弹出窗口。

不用说，把上面的javascript放在DOM-ready回调中，一旦DOM准备好就激活所有弹出窗口:

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

如果你正在用javascript创建包含工具提示的html，然后将其插入到文档中，你必须在插入html到文档后激活弹出窗口/工具提示，而不是在文档加载时…

小开

我知道这是一个老问题，但因为我有这个问题与新发布的引导，它在网站上不清楚，这里是如何启用工具提示。

给元素一个类似"tooltip-test"的类

然后在javascript标签中激活这个类:

<script type="text/javascript">
$('.tooltip-test').tooltip();
</script>


<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>
小开

如果你像其他答案建议的那样执行$("[rel='tooltip']").tooltip();，那么你将只在DOM中当前存在的元素上激活工具提示。这意味着如果您稍后要更改DOM并插入动态内容，那么它将无法工作。此外，这是更低的效率，因为它为个人元素安装事件处理程序，而不是使用JQuery事件委托。所以我发现激活Bootstrap工具提示的最好方法是这一行代码，你可以把它放在文档准备好，然后忘记它:

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

注意，我使用title作为选择器，而不是rel=title或data-title。这有一个优点，它可以应用于许多其他元素(rel是应该，仅用于锚)，而且它也可以作为旧浏览器的“备用”。

还要注意，如果你使用上面的代码，你不需要data-toggle="tooltip"属性。

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

如果你可以不使用title属性，那么我建议使用纯CSS解决方案，如Hint.css或检查http://csstooltip.com，这根本不需要任何JavaScript代码。

小开

你必须把工具提示javascript 后的html。像这样:

<a href="#" rel="tooltip" title="Title Here"> I am Here</a>


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


</script>

或者使用$(document)。准备好:

$(document).ready(function() {


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


});


</script>

工具提示不工作，因为你放了javascript之前的Tooltip HTML，所以他们不知道是否有javascript的工具提示。在我看来，剧本是从头到尾读的。

小开

在遇到同样的问题后，我发现这个解决方案可以工作，无需在Bootstrap所需属性之外添加额外的标记属性。

超文本标记语言

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

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

希望这能有所帮助!

小开

超文本标记语言

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

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

这是我的工作。

小开

我有一个类似的问题，特别是如果你运行在一个按钮容器，如垂直按钮容器。在这种情况下你必须将容器设置为" body "

I have added a jsfiddle example

example .

小开
这是最简单的方法。 只要把它放在</body>之前:

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

检查引导程序关于工具提示的文档中给出的例子。

例如:

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

我只是补充了一句:

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

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

小开

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

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>


<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>

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

<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>

小开

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

注意:

如果在将这些工具提示示例放入页面时它们不起作用，那么您将遇到另一个问题。你需要考虑以下几点:

  • 所包含脚本的顺序
  • 查看是否正在尝试初始化已删除的HTML元素
  • 看看你是否正在尝试调用你不再包含的JS文件中的方法
  • 查看是否包含了提供所需功能的JS文件(不仅是工具提示，还包括页面上使用的任何组件)。

    <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>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/app/inspinia.js"></script> <!-- if using INSPINIA -->
... your JavaScript initializers ...
</body>

Failure of ANY of the above items can (and often does) prevent javascript from loading and/or running, and that keeps everything nice and broken.

WORKING EXAMPLES

Let's say you have a badge, and you want it to show a tooltip when the user hovers over it.

Original HTML:

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

普通引导工具提示

如果您正在为HTML元素创建工具提示，并且您正在使用Plain Bootstrap工具提示，那么您将负责使用自己的JavaScript代码调用工具提示初始化器。

之前

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

后

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

初始化器

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

引导模板提示(如INSPINIA)

如果你正在使用一个引导模板(比如INSPINIA)，你需要包含一个支持脚本来支持模板特性:

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

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

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

因此，您不必自己初始化inspina样式的工具提示。但是你必须以特定的方式格式化你的元素。初始化器在class属性中查找带有tooltip-demo的HTML元素，然后调用tooltip()方法来初始化定义有data-toggle="tooltip"属性的任何孩子元素。

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

之前

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

后

<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

注意，<span class="tooltip-demo">元素中的任何子元素都将正确地准备它们的工具提示。我可以有三个子元素，它们都需要工具提示，并将它们放在一个容器中。

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

<span class="tooltip-demo">
<span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="A Tooltip">Text 001</span>
<span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Another Tooltip">Text 002</span>
<span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Third Tooltip">Text 003</span>
</span>

最好的用法是将class="tooltip-demo"添加到<td>或最外层的<div>或<span>中。

使用模板时使用普通引导提示

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

之前

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

后

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

初始化器

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

< a href = " http://getbootstrap.com/javascript/ tooltips-usage " > http://getbootstrap.com/javascript/ tooltips-usage < / >

< p >选择功能 出于性能考虑，工具提示和弹出窗口数据api是可选的，这意味着

您必须自己初始化它们。

初始化页面上所有工具提示的一种方法是通过它们的data-toggle属性选择它们:

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

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

例子:

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


<!-- a tag -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
小开

快速和更轻的选择Bootstrap工具提示插件:

HTML:

<div>
<div class="mytooltip" id="pwdLabel">
<label class="control-label" for="password">Password</label>


<div class="mytooltiptext" id="pwdLabel_tttext">
6 characters long, must include letters and numbers
</div>


</div>


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

CSS:

<style>
.mytooltiptext {
position: absolute;
left: 0px;
top: -45px;
background-color: black;
color: white;
border: 1px dashed silver;
padding:3px;
font-size: small;
text-align: center;
}


.mytooltip {
position: relative;
}


.mytooltip label {
border-bottom: 1px dashed black !important;
}
</style>

JSCRIPT:

$(".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”的div中，id由父包装器的id +“_tttext”组成。可以使用其他选择器选项。

希望能有所帮助。

小开

您需要完成以下操作。添加

<script type="text/javascript">
$(function () {
$("[rel='tooltip']").tooltip();
});
</script>

代码在你的页面的某处(最好在<head>部分)。

还可以将data-toggle: "tooltip"添加到任何你想用它启用的东西。

小开

在任何你想用工具提示的元素上添加data-toggle="tooltip"。

小开

在工具提示上引导文档

由于性能原因，工具提示是可选的，所以您必须自己初始化它们。 初始化页面上所有工具提示的一种方法是根据它们的数据-选择它们 切换属性:< / p > 
  $('[data-toggle="tooltip"]').tooltip()
小开

你可以使用 poper .js .js

<script src="JavaScript/popper.min.js"></script>
<script src="JavaScript/bootstrap.min.js"></script>

并调用tooltip函数:

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

Bootstrap 5.2 (2022)

有人想实现新的引导工具提示吗

步骤1

包括js

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

步骤2

包括这个脚本

$(document).ready(function(){
$('[data-bs-toggle="tooltip"]').tooltip()
})
< p >为什么?
因为文档是这么说的:https://getbootstrap.com/docs/5.2/components/tooltips/#overview

由于性能原因，工具提示是可选择的，因此必须自己初始化它们。

步骤3

将data-bs-toggle="tooltip"包含到代码中。

<a href="#" data-bs-toggle="tooltip" title="A nice tooltip">test</a>

提交答案