Learn how to create a tooltip using the bootstrap in this tutorial. Bootstrap tooltip is the simplest way of creating a tooltip. You can use tooltip to display the information about the content like anchor tag, buttons.

Your user hover over the element and the information comes out as a tooltip. You can display tooltip as a title of the element. However, the title does not provide the vision that attract visitors. Bootstrap provides a tooltip that can attract your visitors when they hover over the element.

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 tooptip using the javascript. Add below given javascript to trigger to tooltip on hover.

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

Output


Simple Tooltip

Hover over the anchor link given above to see the tooltip. The tooltip appears above have 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 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.

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.

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.

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.

Output

Simple Tooltip

Reference
Getbootstrap Doc

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.