Bootstrap Tooltip Not Showing Up

问题

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.

回答1:

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:

回答2:

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"]' });
});

回答3:

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"]' });
    });
},

来源：https://stackoverflow.com/questions/20545745/bootstrap-tooltip-not-showing-up