Bootstrap Tooltips

In bootstrap, the tooltip component is useful to show the HTML elements title attributes text on hover with a customized small pop-up style. The tooltips rely on CSS3 animations and data-attributes for the title to display as a tooltip.

 

To create the tooltips, the following attributes are required:

 

  • data-toggle="tooltip" attribute to toggle the tooltip feature for the selected element.
  • Fill in the title attribute for the text you want to get displayed in the tooltip.
  • data-placement attribute it’s optional but required to set the direction of the tooltip on the top, bottom, left, or right side of the element.

Following is the example of creating the tooltip for required elements in bootstrap.

 

<a href="#" class="btn btn-primary" data-toggle="tooltip" title="Sample tooltip">Hover me</a>
<button type="button" class="btn btn-primary" data-toggle="tooltip" title="Click me to save">Submit</button>

In bootstrap, the custom style tooltips can be triggered with jQuery. So, you need to import the following script in order to initialize the tooltips.

 

Live Preview <script>
    $(function() {
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>

The above script will initialize all the tooltips on a page with data-toggle attribute. If you want to enable the tooltip for a particular element, then call the tooltip() method with the id or class of the particular element.

 

The above example will return the result as shown below. 

Bootstrap tooltip example result

The bootstrap tooltips can be enabled for any element such as labels, images, input controls, etc., by adding the required attributes based on our requirements.

Bootstrap Tooltips Direction

By default, the bootstrap tooltips will appear on the top of the element. However, you can change the direction of the tooltip to top, left, right and bottom by using data-placement attribute.

 

Live Preview <!-- Tooltip Positions -->
<a href="#" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Top tooltip">Top Tooltip</a>
<a href="#" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Left tooltip">Left Tooltip</a>
<a href="#" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Right tooltip">Right Tooltip</a>
<a href="#" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Bottom tooltip">Bottom Tooltip</a>

The above example will return the result as shown below.

 

Bootstrap tooltip directions examples result

Bootstrap Tooltip Options

In bootstrap, you can pass the different options to tooltip() method to customize the tooltip based on your requirements.

 

Following are the few important options which we can pass to tooltip() method in bootstrap.

 

NameTypeDefaultDescription
animation boolean true It is useful to set the fade transition to the tooltip.
container string | false false It is useful to append the tooltip to a specific element.
delay number 0 It is useful to delay showing and hiding the tooltip (ms).
html boolean false It is useful to allow HTML in the tooltip.
placement string 'top' It is useful to specify the position of the tooltip.
title string '' It is useful to set the tooltip text.
trigger string 'hover focus' It is useful to set how tooltip to trigger - click | hover | focus | manual. You can pass multiple triggers by separating them with space.
offset number | string 0 It is useful to set the offset of the tooltip relative to its target.

The above tooltip options can set either through the data attributes or JavaScript. Following is the example of passing the options through JavaScript to tooltip() method.

 

Live Preview <script>
   $(function() {
      $('#toptltp').tooltip({
          title: 'Sample Tooltip'
      });
      $('#lftltp').tooltip({
          title: 'Left Tooltip',
          placement: 'left'
      });
      $('#rttltp').tooltip({
          title: '<b>Right</b> Tooltip',
          html: true,
          placement: 'top'
      });
      $('#bttltp').tooltip({
          title: 'Bottom Tooltip',
          placement: 'bottom',
          delay: {
            show: 0,
            hide: 300
          }
      });
   });
</script>

If you observe the above code, we are passing multiple options to tooltip() method by using JavaScript. The above example will return the result as shown below. 

Bootstrap tooltip directions examples result

Bootstrap Tooltip Methods

Same like above tooltip options, we have different tooltip() methods to show, hide, or toggle the tooltips based on our requirements.

 

MethodDescription
.tooltip(options) It is useful to attach tooltip options.
.tooltip('show') It is useful to show the tooltip
.tooltip('hide') It is useful to hide the tooltip
.tooltip('toggle') It is useful to toggle the tooltip
.tooltip('dispose') It is useful to hide and destroy the tooltip
.tooltip('enable') It gives an element’s tooltip the ability to be shown.
.tooltip('disable') It removes the ability for an element’s tooltip to be shown.

Following is the example of using tooltip() methods to show, hide, or toggle the tooltip based on the button clicks in bootstrap.

 

Live Preview <script>
   $(function() {
       $('#btnShow').click(function() {
           $('#smptltip').tooltip('show');
       });
       $('#btnHide').click(function() {
           $('#smptltip').tooltip('hide');
       });
       $('#btnTgle').click(function() {
           $('#smptltip').tooltip('toggle');
       });
   });
</script>

The above example will return the result as shown below. 

Bootstrap tooltip methods example result

Bootstrap Tooltip Events

In bootstrap, the tooltip classes have few events for hooking into tooltip functionality to fire the events during the showing or hide the tooltip.

 

EventDescription
show.bs.tooltip This event will trigger before the tooltip is shown.
shown.bs.tooltip This event will trigger after the tooltip is shown.
hide.bs.tooltip This event will trigger before the tooltip is hidden.
hidden.bs.tooltip This event will trigger after the tooltip is hidden
inserted.bs.tooltip This event will trigger after the show.bs.tooltip event before the tooltip is shown.

Following is the example of using the events to show the alert message during the showing and hiding the tooltip in bootstrap.

 

Live Preview <script>
   $(function() {
      $('[data-toggle="tooltip"]').tooltip();
      $("#tltip1").on('hidden.bs.tooltip', function() {
          alert('The tooltip1 is dismissed');
      });
      $("#tltip2").on('show.bs.tooltip', function() {
          alert('The tooltip2 will be shown now');
      });
   });
</script>

This is how we can use the bootstrap tooltips in our applications to show the HTML elements title attributes text on hover with a customized popup style based on our requirements.

Previous
 
Next