Twitter Bootstrap 工具提示不起作用答案

【问题标题】：Twitter Bootstrap tooltip not workingTwitter Bootstrap 工具提示不起作用
【发布时间】：2013-03-06 11:41:23
【问题描述】：

我已下载 Twitter Bootstrap 并将 .js 文件包含在页脚中。当您将鼠标悬停在信息图标上时，我希望出现一个工具提示。所以我有这个代码：

<img src="<?php bloginfo('template_directory'); ?>/img/png/info.png" rel="tooltip" data-placement="top" title="blah blah blah">

然后我有这个脚本来启用工具提示：

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

但工具提示在 Twitter Bootstrap 的示例页面上并没有出现。 http://twitter.github.com/bootstrap/javascript.html#tooltips

它以我的主题的默认样式显示，但有趣的是，如果我在 WordPress 上下载 Twitter Bootstrap 插件并在插件中启用 Javascript 库 - 它可以工作。但问题是默认 CSS 会覆盖我在网站上的 CSS。

希望我已经说清楚了。

非常感谢任何答案，因为这已经让我绞尽脑汁两天了。

安排

【问题讨论】：

您能为我们准备一份fiddle吗？
确定 - jsfiddle.net/Euqbz
呃，你确定你知道你在做什么吗？包括jQuery 和Twitter Tooltip 建议让它工作;）看看我的回答：stackoverflow.com/a/15246782/1250044
是的，我在 footer.php 文件中包含了 bootstrap.js 文件和 jQuery.js 库...
嗯，很难看出是你的问题所在！看看我的回答，它按预期工作：stackoverflow.com/a/15246782/1250044也许你已经在jQuery上方包含了推特Tooltip-plugin？

【解决方案1】：

你应该给这样的东西：

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

属性选择器应该应用于元素。

【讨论】：

【解决方案2】：

按预期为我工作。你确定你已经包含了jQuery 和推特Tooltip-plugin（以正确的顺序）？

【讨论】：

<script src="<?php bloginfo('template_directory'); ?>/js/bootstrap.js"></script> <script src="<?php bloginfo('template_directory'); ?>/js/bootstrap.min.js"></script><script src="<?php bloginfo('template_directory'); ?>/js/jQuery.js"></script>
@ArranChristopherScott 您能否提供指向您主页的链接？
该网站位于开发服务器上，只能通过我的家庭网络访问，如果您愿意，我可以为您提供工具提示外观的屏幕截图，感谢您的帮助
是的，这会很有帮助...只需为此编辑您的问题。
dropbox.com/s/wg3pld748mvyroa/… - 我在我的 Dropbox 页面上分享了一个链接

【解决方案3】：

@Arran 我也有同样的问题，但如果我将 'title' 更改为 'data-original-title' 那么它对我有效。尝试使用这个：

<img src="<?php bloginfo('template_directory'); ?>/img/png/info.png" rel="tooltip" data-placement="top" data-original-title="blah blah blah">

【讨论】：