Bootstrap (Part-9) | Tooltips

In this article, we would be discussing the tooltip plugin provided by bootstrap. Tooltip is quite useful for showing the description of different elements in the webpage. Tooltip can be invoked on any element in a webpage.
Tooltips on bootstrap depends on the 3rd party library Tether for positioning.

Tether library

Hence, we need to include tether.min.js before bootstrap.js

Now let’s see an example of a tooltip.

Example of a tooltip



Now we will examine the code which generates the above tooltip

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- Tooltip on a header -->
<h3 data-toggle="tooltip" title="Hey! Tooltip here!">
    Hover Over me to see a tooltip
</h3>

chevron_right


In order to introduce tooltip, we add the data-toggle attribute to an element and we need to initialize the tooltip with jQuery.

jQuery code for initializing a tooltip:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
// jQuery code for initializing a tooltip
$(document).ready(function () 
{
    // jQuery Attribute value selector to 
    // select the specified element and 
    // call the tooltip method on it
    $('[data-toggle="tooltip"]').tooltip();
});
</script>

chevron_right


We can even customize this tool-tip according to our requirement, let’s explore different ways in which we can customize the tool-tip.

  • Placement of a tool tip : We can place a tool tip at top, bottom, left and right of an element.
    Example:
    Tooltip placements

    Code for the above example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!-- Tooltips on simple buttons -->
    <!-- Placement of tooltips -->
    <div class="row" style="margin:30px">
        <div class="col-2">
            <button type="button" class="btn btn-info" 
             data-toggle="tooltip" data-placement="top" 
             title="Information Button">
                Information 
            </button>
        </div>
        <div class="col-2">
            <button type="button" class="btn btn-success" 
             data-toggle="tooltip" data-placement="right" 
             title="Success Button">
                Success
            </button>
        </div>
          
        <div class="col-2">
            <button type="button" class="btn btn-danger" 
              data-toggle="tooltip" data-placement="bottom" 
              title="Danger button">
                 Danger
            </button>
        </div>
        <div class="col-2">
            <button type="button" class="btn btn-warning" 
              data-toggle="tooltip" data-placement="left" 
              title="Warning button">
                 Warning
            </button>
        </div>
    </div>

    chevron_right

    
    

    In the above code we have used the data-placement attribute in order to set the placement of tool tip, we have also used row and col classes provided by bootstrap grid system

  • Html within a tootip: We can add html as a content of a tootlip.
    Example:
    Html as a content of tooltip

    Code for the above example:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!-- Tooltip with html -->
    <div class="row" style="margin:40px">
        <button type="button" class="btn btn-warning" 
         data-toggle="tooltip" data-placement="left" 
         data-html="true"
         title="<h4>Hey!</h4><p>Tooltip with html</p>">
              Warning
        </button>
    </div>

    chevron_right

    
    

    In the above code we have used the data-html attribute in order to add an html within a tool tip.

  • Offset for a Tooltip: We can set the offset of the tool-tip relative to the target.
    Example:
    Offset for tooltips

    Code for the above example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <div class="row" style="margin:40px">
        <button type="button" class="btn btn-warning" 
         data-toggle="tooltip" data-placement="right" 
         data-offset ="20 0" 
         title="Don't click on Warning Button">
            Warning
        </button>
    </div>

    chevron_right

    
    

    In the above code we have used data-offset attribute to set the attribute

Note : Output of all the code below are non static hence, the output is not shown here.