引导工具提示不起作用
我在这里疯了。
我有以下的HTML：
<a href="#" rel="tooltip" title="A nice tooltip">test</a> Bootstrap风格的工具提示拒绝显示，只是一个正常的工具提示。
我有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示例的源代码，看不到任何在那里启动工具提示的东西。 所以我猜这应该只是工作，还是我错过了重要的东西？
我有模态和警报和其他事情工作得很好，所以我不是一个完全白痴;）
谢谢你的帮助！
总结一下：使用jQueryselect器激活你的工具提示
<script type="text/javascript"> $(function () { $("[rel='tooltip']").tooltip(); }); </script>
事实上，你不需要使用属性select器，即使它的标签中没有rel="tooltip" ，也可以在任何元素上调用它。
遇到同样的问题后，我发现这个解决scheme不需要在Bootstrap所需的属性之外添加额外的标签属性。
HTML
<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>
JQuery的
$(document).ready(function() { $("body").tooltip({ selector: '[data-toggle=tooltip]' }); });
希望这可以帮助！
你不需要单独的所有js文件
如果要使用所有引导函数，只需使用以下文件即可：
-bootstrap.css -bootstrap.js
他们都可以在http://twitter.github.comfind
最后
– 最新版本的jquery.js
对于字形你需要图像
glyphicons-halfings.png和/或glyphicons-halfings-white.png（白色图像）
你需要上传到你的网站的内部/ img /文件夹（或）存储在任何你想要的地方，但改变文件夹内的bootstrap.css
对于工具提示，您需要在<head> </head>标记内使用以下脚本
<script type='text/javascript'> $(document).ready(function () { if ($("[rel=tooltip]").length) { $("[rel=tooltip]").tooltip(); } }); </script>
而已…
http://getbootstrap.com/javascript/#tooltips-usage
selectfunction出于性能方面的考虑，Tooltip和Popover数据API是可选的
你必须自己初始化它们。
初始化页面上的所有工具提示的一种方法是通过它们的data-toggle属性来select它们：
<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的新版本中遇到了这个问题，并且在网站上没有清楚，所以下面是如何启用工具提示。
给你的元素一个类似“tooltip-test”
然后在你的JavaScript标签中激活这个类：
<script type="text/javascript"> $('.tooltip-test').tooltip(); </script> <a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>
HTML
<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>
JQuery的
$(document).ready(function() { $('[data-toggle=tooltip]').tooltip(); });
这个是为我工作的。
如果你做$("[rel='tooltip']").tooltip(); 正如其他答案已经build议，那么你将只激活DOM中当前存在的元素的工具提示。 这意味着如果您打算更改DOM并在稍后插入dynamic内容，则不起作用。 而且这个效率要低得多，因为它为个别元素安装事件处理程序，而不是使用JQuery事件委托。 所以，我发现激活Bootstrap工具提示的最好方法就是这样一行代码，您可以将它放在文档中，然后忘记它：
$(document.body).tooltip({ selector: "[title]" });
请注意，我使用title作为select器而不是rel=title或data-title 。 这有一个好处，它可以被应用到很多其他元素（ rel 应该只是为了锚），而且它也可以作为老式浏览器的“后备”。
另外请注意，如果您使用上面的代码，则不需要data-toggle="tooltip"属性。
Bootstrap工具提示很贵，因为您需要处理每个元素上的鼠标事件。 这就是为什么他们默认没有启用它的原因。 因此，如果您决定注释掉上面的内容，那么如果您使用title属性，那么您的页面仍然可以正常工作。
如果你没有使用标题属性，那么我会build议使用纯粹的CSS解决scheme，如Hint.css或检查http://csstooltip.com ，根本不需要任何JavaScript代码。
工具提示和popup窗口不仅仅是-css插件，如下拉菜单或进度条。 要使用工具提示和popup窗口，你必须使用jquery来激活它们（阅读javascript）。
所以，让我们说我们想要一个popup窗口，单击一个HTMLbutton时显示。
<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代码来激活popover：
$('.popovers-to-be-activated').popover();
实际上，上面的JavaScript代码将会激活所有具有“即将激活的popup式”类的html元素的popup窗口。
不用说，在DOM准备就绪的callback中，将上面的JavaScript放到DOM中就可以激活所有的popup：
$(function() { // Handler for .ready() called. $('.popovers-to-be-activated').popover(); });
这是最简单的方法。
把这个放在</body>之前：
<script type="text/javascript"> $("[data-toggle=\"tooltip\"]").tooltip(); </script>
查看Bootstrap有关工具提示的文档中给出的示例。
例如：
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip text here">Link with tooltip</a>
在头部分，您需要先添加下面的代码
<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>
然后在正文部分，你需要写下面的代码
<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>
如果一切仍然没有解决使用最新的jquery库，你不需要任何的jQueryselect器，如果你使用最新的引导2.0.4和jquery-1.7.2.js
只要使用rel="tooltip" title="Your Title" data-placement=" "
按照您的意愿在数据放置中使用顶部/底部/左侧/右侧。
我已经在头文件中添加了jquery和bootstrap-tooltip.js。 在页脚中添加此代码适合我！ 但是当我在头添加相同的代码，它不工作！
<script type="text/javascript"> $('.some-class').tooltip({ selector: "a" }); </script>
如果使用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加载，它工作正常。
我只是补充说：
<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>
在bootstrap.min.js下面，它工作。
让我们用一个例子来展示如何将工具提示添加到文档中的任何HTML元素。
注意：
如果这些工具提示样本在将它们放入页面时不起作用，那么您还有其他问题。 你需要看看像这样的东西：
- 包括脚本的顺序
- 看看你是否尝试初始化已被删除的HTML元素
- 看看你是否试图调用你不再包含的JS文件中的方法
-
看看你是否包含提供你需要的function的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>
以上任何一项失败都可以（并且经常）阻止JavaScript加载和/或运行，并且保持一切的美好和破碎。
工作举例
比方说，你有一个徽章，你希望它显示一个工具提示，当用户hover在它。
原始HTML：
<span class="badge badge-sm badge-plain">Admin Mode</span>
平原引导工具提示
如果您正在为HTML元素创build工具提示，并且您正在使用Plain Bootstrap工具提示，那么您将负责使用自己的JavaScript代码调用Tooltip Initializers。
之前
<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），那么您将包含支持脚本以支持模板function：
<script src="/Scripts/app/inspinia.js" />
在INSPINIA的情况下，包含的脚本在文档加载完成时通过运行以下JavaScript代码自动初始化所有工具提示：
// Tooltips demo $('.tooltip-demo').tooltip({ selector: "[data-toggle=tooltip]", container: "body" });
因此，您不必自己初始化INSPINIA样式的工具提示。 但是你必须以特定的方式来格式化你的元素。 初始化程序使用tooltip-demo在class属性中查找HTML元素，然后调用tooltip()方法初始化具有data-toggle="tooltip"属性定义的任何子元素。
对于我们的示例徽章，在其周围放置一个外部元素（如<div>或<span> ），其中class="tooltip-demo" ，然后为实际工具提示data-placement 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>标签来创build工具提示，则可以使用标准的Bootstrap工具提示而不干扰模板。 在这种情况下，您将自己负责初始化工具提示。 但是，您应该在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>
如果您正在创build包含javascript的工具提示的html，然后将其插入到文档中，则必须激活popup窗口/工具提示之后，您已将html插入到文档中，而不是文档加载中。
您必须在HTML 之后放置工具提示JavaScript。 喜欢这个 ：
<a href="#" rel="tooltip" title="Title Here"> I am Here</a> <script> $("* [rel='tooltip']").tooltip({ html: true, placement: 'bottom' }); </script>
或者使用$（document）.ready：
$(document).ready(function() { $("* [rel='tooltip']").tooltip({ html: true, placement: 'bottom' }); }); </script>
工具提示不工作，因为你把工具提示的HTML之前的JavaScript ，所以他们不知道是否有一个JavaScript的工具提示。 在我看来，脚本是从顶部到底部读取的。
我有一个类似的问题，特别是如果你正在像一个垂直button容器的button容器中运行。 在这种情况下，您必须将容器设置为“body”
I have added a jsfiddle example
例
把你的代码放在文档里面
$(document).ready(function () { if ($("[rel=tooltip]").length) { $("[rel=tooltip]").tooltip(); } });
在我的情况下，我也错过http://twitter.github.com/bootstrap/assets/css/bootstrap.css工具提示CSS类，所以不要忘记。;
您需要执行以下操作：
- 添加
<script type="text/javascript"> $(function () { $("[rel='tooltip']").tooltip(); }); </script><script type="text/javascript"> $(function () { $("[rel='tooltip']").tooltip(); }); </script>代码（最好在<head>部分） - 添加
data-toggle: "tooltip"到任何你想启用它。
添加data-toggle="tooltip"在任何你想要的元素与工具提示。
Bootstrap工具提示插件的替代scheme：
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 +“_tttext”的id。 可以使用其他select器选项。
希望能帮助到你。
