Twitter Bootstrap tooltip not working

Question

I have downloaded Twitter Bootstrap and included the .js files in the footer. I'm wanting a tooltip to appear when you mouse over an info icon. So I have this code:

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

Then I have this script to enable the tooltip:

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

But the tooltip doesn't appear how it does on the example page over at Twitter Bootstrap. http://twitter.github.com/bootstrap/javascript.html#tooltips

It appears with the default styling from my theme, the interesting thing however is if I download the Twitter Bootstrap plugin on WordPress and enable the Javascript library in the plugin - it works. But the catch however is that the default CSS overrides my CSS on the website.

Hope i've made myself clear.

Any answers greatly appreciated as this has been racking my brain for two days.

Arran

Answer 1

You should give something like this:

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

Attribute selectors should be applied on elements.

Answer 2

Works for me as excpected. Are you shure that you've included jQuery and twitters Tooltip -plugin (in the correct order)?

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

Answer 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">