Twitter Bootstrap tooltip not working on button

Question

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

JavaScript

$('.resetPrice').tooltip();

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.

Answer 1

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

$(function() {
    $('.resetPrice').tooltip();
});

Here's a 2.3.2 fiddle and 3.0 fiddle

Both produce the following result:

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

Answer 2

Have you enabled the tooltip javascript? If not, then you'll need the following in the head of your html:

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

The bootstrap page makes special note of using tooltip for button groups:

"When using tooltips or popovers on elements within a .btn-group, you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered)."