3

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?

3
  • 1
    The selector needs to select something in the page markup. Do you have any html elements with data-toggle='tooltip' as an attribute? Commented Nov 30, 2014 at 19:24
  • @murraybiscuit, yes I have. I tried adding the elements both to node.tpl.php and to block but didn't work: <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
    – herci
    Commented Nov 30, 2014 at 19:34
  • 1
    Is the code appearing correctly when you inspect the element in the browser? Also are the any js errors in the console? It might be that you are just missing one of the dependent scripts.
    – bloke_zero
    Commented Dec 1, 2014 at 9:54

2 Answers 2

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).
3
  • 1
    This is not an answer. You can use any bootstrap based theme and then enable the Tooltip and Popover features. You don't have to use bootstrap base theme.
    – herci
    Commented Jun 25, 2015 at 10:13
  • It is an answer. It's a pretty bad one, so it may attract downvotes tho'. Commented Jun 25, 2015 at 10:30
  • 1
    Guys, I just misunderstood the question. Review a new answer now!
    – tonystar
    Commented Jun 25, 2015 at 10:40
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.