By default, the tooltip will appear on top of the element. We can use
data-placement
attribute to set the position of the tooltip on top, bottom, left or the right side of the element.
<a href="#" data-toggle="tooltip" data-placement="top" title="Top tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Bottom tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Left tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Right tooltip">Hover</a
We can also use data-placement="auto"
, to dynamically reorient the tooltip. The tooltip in the next example the tooltip will display to the left when possible, otherwise it will display right.
<a href="#" data-toggle="tooltip" data-placement="auto left" title="To the left?">Hover</a