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. .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

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

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Mar 6, 2013 at 12:42 Shail 3,64911 gold badge2020 silver badges2929 bronze badges asked Mar 6, 2013 at 11:41 Arran ScottArran Scott 17355 silver badges1717 bronze badges 5

• Can you prepare a fiddle for us? – yckart Commented Mar 6, 2013 at 11:50
• sure - jsfiddle/Euqbz – Arran Scott Commented Mar 6, 2013 at 11:55
• Erm, are you shure that you know what you do? Including jQuery and Twitter Tooltip is remended to let it work ;) Look at my answer: stackoverflow./a/15246782/1250044 – yckart Commented Mar 6, 2013 at 11:56
• Yeah, i've included the bootstrap.js file and the jQuery.js library in my footer.php file... – Arran Scott Commented Mar 6, 2013 at 11:59
• Mhh, it's hard to see were your problem sits! Look at my answer, it works as excpected: stackoverflow./a/15246782/1250044 Maybe you've included twitters Tooltip-plugin above jQuery? – yckart Commented Mar 6, 2013 at 12:01

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You should give something like this:

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

Attribute selectors should be applied on elements.

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

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

@Arran I have also the same problem but if I change 'title' to 'data-original-title' Then it works form me.Try to use this:

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