Using tooltips with Bootstrap 3

Question

I've spent the last hour or so checking out every question I could find on how to get Bootstrap 3's tooltips working.

I've managed to get regular, unstyled tooltips working, but I really want that bootstrap look.

I know there's already been a lot of discussion on this, but I think it would be really helpful to have a step-by-step guide on exactly how to get tooltips working, as it seems to me that lots of people (myself included) are having issues getting it up and running.

Just FYI I'm running on a Java web server so all of my front-end is JSP.

Thanks, and have a good one ya'll.

Answer 1

Here's a fiddle:

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

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

$(function(){
    $('#right').tooltip();
    $("#left").tooltip({
        placement: "left",
        title: "tooltip on left"
    });
});

More tooltip options are here.

Notice that you will have to add the tooltip handler in Javascript.