Bootstrap 3 – Get Tooltips Working

The tooltips gave me a little bit of an issues but after nutting it out I thought I might do a brief post to help other that run into the same problem.

First this is for Bootstrap version 3.

The way I am calling the tool tips is via the Markup. This is the part of the code where you want the tool tip.

<a id="example" title="" href="#" data-toggle="tooltip" data-placement="left" data-original-title="Tooltip on left">Hover over me</a>

NOTE: I found that the title=”” needed to go before the data-origial-title for the tooltip to work.

At the bottom of your HTML page just below the Bootstrap Core Javascript add this:

<script type="text/javascript">
        $(document).ready(function() {
            $('#example').tooltip();
        });
 
</script>

You can add an number of customisations to suit your needs here in the code. Your choices are listed here. For anyone just learning it might look like this.

<script type="text/javascript">[

 $(document).ready(function(){
    $("#example").tooltip({
        placement: "left",
        title: "tooltip on left",
    });
 });
</script>

This just makes the tooltip go to the left and places a default title if you have not added it to the code as we previously did with the data-original-title.

Hope that helps.