CODEWITHSUNDEEP
twitter-bootstrap-3
David K.
David K.

Reputation: 729

Using tooltips with Bootstrap 3

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.

Upvotes: 11

Views: 51590

Answers (2)

Naresh Kumar
Naresh Kumar

Reputation: 345

My HTML:

<a href="#" id="mytooltip" class="btn btn-primary" data-toggle="tooltip" title="my tooltip"> tooltip </a>

My jQuery:

$(document).ready(function(){ 
    $('#mytooltip').tooltip();
});

Now just add the attribute: data-placement="left" like this:

<a href="#" id="mytooltip" class="btn btn-primary" data-toggle="tooltip" title="my tooltip" data-placement="left"> tooltip </a>

Upvotes: 3

Yogesh
Yogesh

Reputation: 2228

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.

Upvotes: 15

Related Questions