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.
|
1 2 3 4 5 |
<script type="text/javascript"> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script> |
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.
|
1 2 3 4 5 6 |
<script type="text/javascript"> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script> <a href="#." data-toggle="tooltip" title="Simple tooltip created using Bootstrap">Simple Tooltip</a> |
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.
|
1 2 3 4 5 6 |
<script type="text/javascript"> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script> <a href="#." data-toggle="tooltip" data-placement="right" title="Right direction tooltip">Simple Tooltip</a> |
Output
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.
|
1 |
<a href="#." data-toggle="tooltip" data-placement="left" title="Left direction tooltip">Simple Tooltip</a> |
Output
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.
|
1 |
<a href="#." data-toggle="tooltip" data-placement="top" title="Top Direction Tooltip">Simple Tooltip</a> |
Output
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.
|
1 |
<a href="#." data-toggle="tooltip" data-placement="bottom" title="Bottom Direction Tooltip">Simple Tooltip</a> |
Output