Twitter Bootstrap tooltip not working on button

Profile picture for Julian Dormon
Julian Dormon

I have the following added to the bottom of my page in a script tag:

JavaScript

<!-- language: lang-js --> 
$('.resetPrice').tooltip();

HTML

<!-- language: lang-html --> 
<button title="reset pricing" class="btn btn-mini resetPrice" type="button" id="ResetAA1-1-1">
    <i class=" icon-refresh"></i>
</button>

Any help would greatly be appreciated.

It doesn't look like there's much of a problem here. There's no key difference in the way the API between version 2.x and 3.0 handles tooltip calls.

You can read more about the ToolTip API for 2.3.2 and 3.0

Without further info, there are two things it might be:

  • You should make sure to use a ready doc function and wait until the DOM is loaded to run the tooltip call
  • Make sure you have included proper references to bootstrap external css and js files (available inside each demo)
  • If the element was at the very top of the page, and you're using the default tool tip pointed up, you won't be able to see it. You either have to move the object down or use the placement option.

This code should work fine

<!-- language: lang-js --> 
$(function() {
    $('.resetPrice').tooltip();
});

Here's a 2.3.2 fiddle and 3.0 fiddle

Both produce the following result:

demo

See if you can reproduce any further issues and let us know if you're still having trouble