19

I am trying to use the Bootstrap tooltip in an app of mine. Currently, I have the following:

<button type="button" class="btn btn-default" 
        data-toggle="tooltip" data-placement="left"
        title="Tooltip on left">
            Tooltip on left
</button>

Unfortunately, my tooltip is not showing. I'm trying to figure out what I'm doing wrong. I know that it can be created via JavaScript. However, I'm trying to define my tooltip declaratively. I've confirmed that the Tooltip.js file is being included. However, I can't figure out what I'm doing wrong.

Is it possible to use a tooltip in a pure declarative sense? If so, can someone show me how via a JSFiddle or Bootply sample? I'm really banging my head on this one.

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
user2871401
  • 1,867
  • 5
  • 22
  • 24
  • Hi - I know its late to the party - but I just had this same issue and thought I would share the reason fro it not showing up - in a normal BS html page, when the content is in the DOM from the start - the tooltip will render after declaring it ias in the answers below. The issue with angularjs application - is that the content is inserted into the DOM as required and as such the tooltip needs to be declared on a higher level element that was present in the DOM - this answer below (https://stackoverflow.com/a/33018696/5867572) resolved this for me. – gavgrif Jun 08 '20 at 02:14

4 Answers4

35

No, it is not possible to use the tooltip in a pure declarative sense. From the Docs:

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

So you must call .tooltip() manually in JavaScript like this:

$("[data-toggle=tooltip]").tooltip();

Or use whatever selector you want.

Working Demo in jsFiddle

Which should look like this:

screenshot

KyleMit
  • 30,350
  • 66
  • 462
  • 664
  • The fiddle doesn't use AngularJS though. That's part of my problem. – user2871401 Dec 17 '13 at 13:45
  • You should be able to handle tooltips the same exact way. Since AngularJS isn't anywhere in your problem, i'd suggest marking this as solved and opening up a new question that is able to reproduce your issue specific to angular in as little code as possible. – KyleMit Dec 17 '13 at 14:01
  • I did as you asked. I marked this question as solved. I opened up a new question. That question can be found at http://stackoverflow.com/questions/20666900/using-bootstrap-tooltip-with-angularjs. Thank you for your help. – user2871401 Dec 18 '13 at 19:37
  • @Spir, not working how? Do you get console errors? Do tooltips work in the [bootstrap docs](http://getbootstrap.com/javascript/#tooltips)? – KyleMit Jan 05 '15 at 13:17
  • 1
    @KyleMit "Error: Syntax error, unrecognized expression: [data-toggle=tooltip" on your jsfiddle link. You forget the last ]. Fixed: http://jsfiddle.net/Q8TZv/159/ – Spir Jan 05 '15 at 17:14
18

In my project I have a div with .btn-group class and 3 'a' elements with class btn. Initializing with Bootstrap official code doesn't worked (I'm using Twitter.Bootstrap.less, I don't know if makes any diference):

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

Then I found a solution on another StackOverFlow Answered by ImaJedi4ever that work like a charm for me, to initialize the bootstrap tooltip:

$(function(){
    $('body').tooltip({ selector: '[data-toggle="tooltip"]' });
});
NerdKvothe
  • 181
  • 1
  • 4
  • Beautiful, should be the accepted answer. I'm using webpack for dependency bundling and the official Bootstrap way did not work, but using the body tag with the selector parameter did the trick. +1 thanks! – NightOwlPrgmr Oct 20 '20 at 19:51
6

Had a problem showing it in meteor with react and bootstrap 4 alpha. this works like a magic!

componentDidMount() {
    $(function(){
        $('body').tooltip({ selector: '[data-toggle="tooltip"]' });
    });
},
phongyewtong
  • 5,085
  • 13
  • 56
  • 81
0

For Bootstrap 5:

Reference Link: https://getbootstrap.com/docs/5.0/components/tooltips/

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<div>
<button type="button" class="btn btn-secondary m-4" data-bs-toggle="tooltip" title="Tooltip">
  Tooltip
</button>
</div>
Pramila Shankar
  • 396
  • 4
  • 10