Twitter Bootstrap工具提示不起作用

时间:2013-03-06 11:41:24

标签: javascript jquery twitter-bootstrap

我已下载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。

希望我已经说清楚了。

任何答案都非常感激,因为这已经让我的大脑震撼了两天。

阿伦

3 个答案:

答案 0 :(得分:5)

你应该给出这样的东西:

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

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

答案 1 :(得分:0)

按预期为我工作。您确定已包含jQuery和twitters Tooltip - 插件(按正确顺序)吗?

http://fiddle.jshell.net/xe5UX/2/

答案 2 :(得分:0)

@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">
相关问题