twitter-bootstrap Tooltip Positioning Tooltips


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

enter image description here

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