Bootstrap 4 Tooltip

Tooltip

Bootstrap 4 offers a tooltip component, a small popup box that appears when you move the cursor over an element such as buttons or any highlighted element. It is also used to provide hints about any element. The tooltip describes the purpose of the hyperlinks when you move the cursor over it.

Steps for creating Tooltip

Add the data-toggle=” tooltip” attribute along with the title attribute to the <a> element.  The value of the title attribute is the text that will be displayed in the popup box when you move the cursor over an element.

Note: You need to add jQuery code to initialize the all tooltip option in one way.

Example

Output

Bootstrap 4 Tooltip

Positioning Tooltip – Bootstrap 4 allows you to set the position of the tooltip (popup box) on your own. You can set the position of the tooltip to the right, left, bottom, and top. 

  • Add the data-placement=” left” attribute to set the tooltip position to the left of the element.
  • Add the data-placement=” right” attribute to set the tooltip position to the right of the element.
  • Add the data-placement=”bottom” attribute to set the tooltip position to the bottom of the element.
  • Add the data-placement=”top” attribute to set the tooltip position to the top of the element.

Example

Output

Bootstrap 4 Tooltip

Pin It on Pinterest

Share This