Bootstrap Tooltip

The Tooltip Plugin

A Bootstrap tooltip is a useful plugin that is there to give you more information about the different page elements. Basically, it is a small pop-up box which will appear when you move hover your mouse pointer over some element.

Creating a Bootstrap Tooltip

You can create a bootstrap tooltip by adding the data-toggle="tooltip" attribute to any element. The title attribute can be used to specify the tooltip content.

The code below, can be used to enable all tooltips in the document:

Positioning Bootstrap Tooltips

The default position for the tooltip is on top of the target element. This can be changes to a desired position by using the data-placement attribute.

You can use data-placement="left | right | bottom | top"

You can set the position on bottom, left, right or even top. See the code below for examples:

Here’s a useful tip for if you’re not sure about the best position for the tooltip.

You can set the value for the data-placement attribute as “auto”. This will let the browser decide the position of the tooltip.

So for instance, if you put the value as “auto right”, the tooltip will be displayed on the right side whenever possible, otherwise on the left.

Bootstrap tooltip methods

Here’s a list of tooltip methods that can be used to control the different states of the tool tip based on some specified arguments.

  • .tooltip(options): For activating the tooltip based on the option parameter. The list of the options is as following
    • animation: Takes boolean values. Default value true. Controls the fade transition
    • container: Takes a string or the boolean false. Default value false. Appends the tooltip
    • delay: Takes a number or an object. Default value 0. Controls the show and hide delay.
    • html: Takes a boolean value. Default value false. Controls the acceptance for HTML tages.
    • placement: Takes a string value. Default value “top”. Controls the tooltip position.
    • selector: Takes a string or the boolean false. Default value false. Specifies the selector.
    • template: Takes a string value. Basic HTML code for the tooltip
    • title: Takes a string value. Default value “”
    • .trigger: Takes a string value. Default value “hover focus” Specifies the trigger for the tooltip
    • viewport: Takes a string or an object. Default value {selector: “body”, padding: 0}. Controls the view bounds of the tooltip,
  • .tooltip(“show”): For making the tooltip visible
  • .tooltip(“hide”): For making the tooltip hidden
  • .tooltip(“toggle”): For toggling the the tooltip
  • .tooltip(“destroy”): For hiding and destroying the tooltip

Bootstrap tooltip Events

Listed below, are the different events of the tooltip element. Have a look:

  • bs.tooltip: The event of the tooltip being about to be shown
  • bs.tooltip: The event of the tooltip being fully shown after all the CSS transitions are completed
  • bs.tooltip: The event of the tooltip being about to be hidden
  • bs.tooltip: The event of the tooltip being fully hidden after all the CSS transitions are completed.