To create a tooltip, add the data-tooltip=" " attribute to an element and specify the text that should be displayed inside the tooltip:
<a href="#" data-tooltip="I am here..!">Hover over me</a>
Result : Hover over me
By default, the tooltip will appear on top of the element. Use the data-position attribute to set the position of the tooltip on top, bottom, left or the right side of the element:
<button type="button" data-placement="left" data-tooltip="Tooltip on left">Tooltip on left</button>
<button type="button" data-placement="top" data-tooltip="Tooltip on top">Tooltip on top</button>
<button type="button" data-placement="bottom" data-tooltip="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" data-placement="right" data-tooltip="Tooltip on right">Tooltip on right</button>