How to enable bootstrap tooltip and popover (on a bootstrap based theme)?

Question

I'm using a theme based on Bootstrap 3.

I want to use Tooltip and Popover features that come with Bootstrap but I couldn't.

It's said on the Bootstrap Javascript page that:

Opt-in functionality

For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

I tried to add the code above to my node.tpl.php (inside of tags) but it didn't work. I also tried to save that code as script.js and added it to my theme info file but it didn't work.

How can I enable these features? Where to use the above code?

Answer 1

The best way to enable tooltips/popovers — using selector option (see this and this):

$(document).tooltip({ selector: '[data-toggle="tooltip"]' });
$(document).popover({ selector: '[data-toggle="popover"]' });

In this way it will work with dynamically generated tooltips/popovers too.

The complete code is:

<script>
  (function($) {
    $(function() {
      $(document).tooltip({ selector: '[data-toggle="tooltip"]' });
      $(document).popover({ selector: '[data-toggle="popover"]' });
    });
  })(jQuery);
</script>

You can place it either in:

1. Your theme's .js file (don't forget to remove <script> tag).
2. page.tpl.php template.
3. Custom block (in this case you can easily control on which pages to enable them).

Answer 2

I could enable the tooltip and popover by adding the code below to my node--mytype.tpl.php:

<script>
(function($) {
$(document).ready(function() {
$('[data-toggle=tooltip]').tooltip();
});
})(jQuery);
</script>

I added this JavaScript to my custom node--mytype.tpl.php because I wanted to use tooltip only on that content type.

If you want to use the tooltip anywhere on the website (eg on the blocks), you should add the code above to your theme's html.tpl.php file, just before the closing body tag.