Using tooltips with Bootstrap 3

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.


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>