Bootstrap tooltip

Suggested Video Tutorials
Part 40 - Bootstrap modal popup
Part 41 - Bootstrap modal methods and events
Part 42 - Bootstrap tabs plugin



In this video we will discuss the Bootstrap tooltip plugin.





To create a tooltip
1. Include title attribute on the element. The title attribute value will be displayed as the tooltip.
2. Also, include data-toggle="tooltip" on the element
3. Finally, initialize the tooltip, using the following one line of jQuery code
    $('[data-toggle="tooltip"]').tooltip();

HTML

<button class="btn btn-primary" title="Bootstrap tooltip"

        data-toggle="tooltip">

    Button

</button>

jQuery Code : 

<script type="text/javascript">

    $(document).ready(function () {

        $('[data-toggle="tooltip"]').tooltip();

    });

</script>

By default, the tooltip is displayed on top of the element. We can customize it to be at the bottom, left or right of the element. To customize the tooltip placement use data-placement attribute. The values of this attribute are top, bottom, left or right.

<button class="btn btn-primary" title="Bootstrap tooltip" data-toggle="tooltip"

        data-placement="right">

    Button

</button>

Options to customize tooltip behaviour. These options can be specified using data attributes or Javascript.

Option	Description
placement	Placement can be top, bottom, left or right. Default is top
title	Title for the tooltip
animation	Animates the tooltip. Value can be true or false. Default is true
delay	Time delay for showing and hiding the tooltip. Value can be number in milli-seconds or an object
html	Specifies the HTML for the tooltip. Value can be true or false. Default is false

In the following example we are using title option. For the title option value to show up as the tooltip, please remove the title attribute from the element.

HTML

<button class="btn btn-primary" data-toggle="tooltip">

    Button

</button>

jQuery Code

$(document).ready(function () {

    $('[data-toggle="tooltip"]').tooltip({

        title: 'Tooltip from title option'

    });

});

In the following example we are using placement option to place the tooltip on the right side of the element. 

$(document).ready(function () {

    $('[data-toggle="tooltip"]').tooltip({

        title: 'Tooltip from title option',

        placement: 'right'

    });

});

In the following example we have set animation=false. This removes the fade animation. As a result, the tooltip appears and disappears immediately.

$(document).ready(function () {

    $('[data-toggle="tooltip"]').tooltip({

        title: 'Tooltip from title option',

        placement: 'right',

        animation: false

    });

});

In the following example we have set animation=true and delay = { show: 500, hide: 800 }. With these 2 options, there will be a delay of 500 milli-seconds to show the tooltip and a delay of 800 milli-seconds to hide the tooltip.

$(document).ready(function () {

    $('[data-toggle="tooltip"]').tooltip({

        title: 'Tooltip from title option',

        placement: 'right',

        animation: true,

        delay: { show: 500, hide: 800 }

    });

});

In the example below, we are using HTML tags in the title option, but we have not set HTML option to true. As a result the HTML will be displayed as is in the tooltip.

$(document).ready(function () {

    $('[data-toggle="tooltip"]').tooltip({

        title: '<h3>Help</h3><p>Click to submit the page</p>',

        placement: 'right',

        animation: true,

        delay: { show: 500, hide: 800 }

    });

});

For this to work correctly set HTML option to true.

$(document).ready(function () {

    $('[data-toggle="tooltip"]').tooltip({

        title: '<h3>Help</h3><p>Click to submit the page</p>',

        placement: 'right',

        animation: true,

        delay: { show: 500, hide: 800 },

        html: true

    });

});