Bootstrap Tooltip

Bootstrap tooltip is the simplest way of creating a tooltip. You can use a tooltip to display the information about the content like anchor tag, buttons.

A tooltip displays the content of the title attribute of the element. When you hover over the element, the information comes out as a tooltip. However, the title does not provide a vision that attracts visitors. Bootstrap provides a tooltip that can attract your visitors when they hover over the element.

How to Create a Simple Bootstrap Tooltip

To create a simple tooltip, you need to use the anchor links , buttons or any other elements. On these elements, you have to add the attribute data-toggle="tooltip". Now add the attribute title with the information as the value of the attribute.

This will not display the bootstrap tooltip, you need to trigger tooltip using the javascript. Add below-given javascript to trigger to tooltip on hover.

Below is the example of the tooltip you can use on the website for your visitors. Don’t forget to add the javascript code and trigger the tooltip.

Test it Live

Output


Simple Tooltip

Hover over the anchor link given above to see the tooltip. The tooltip appears above and has a blackish background and white color.

Setting Direction of Bootstrap Tooltip

You can also set the direction of the tooltip to right, left, top and bottom. See the examples below to create a tooltip using bootstrap with directions. Use the attribute data-placement with the values given below.

Right Direction Tooltip

Add attribute data-placement to the anchor link or buttons with the value right and put your information in the attribute title.

Test it Live

Output

Simple Tooltip

Left Direction Tooltip

Use attribute data-placement to the anchor link or buttons and apply the value left. In addition to this, put your information in the attribute title.

Test it Live

Output

Simple Tooltip

Top Direction Tooltip

Top direction tooltip can be created using attribute data-placement to the anchor link or buttons with the value top. Now, add your information in the attribute title.

Test it Live

Output

Simple Tooltip

Bottom Direction Tooltip

Bottom direction tooltip can be created using the attribute data-placement to the anchor link or buttons with the value bottom and put your information in the attribute title.

Test it Live

Output

Simple Tooltip