twitter-bootstrap Tooltip Positioning Tooltips
Example
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="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3B%23%26quot%3B%2520data-toggle%3D%26quot%3Btooltip%26quot%3B%2520data-placement%3D%26quot%3Btop%26quot%3B%2520title%3D%26quot%3BTop%2520tooltip%26quot%3B%26gt%3BHover%26lt%3B%2Fa%26gt%3B%26lt%3Ba%2520href%3D%26quot%3B%23%26quot%3B%2520data-toggle%3D%26quot%3Btooltip%26quot%3B%2520data-placement%3D%26quot%3Bbottom%26quot%3B%2520title%3D%26quot%3BBottom%2520tooltip%26quot%3B%26gt%3BHover%26lt%3B%2Fa%26gt%3B%26lt%3Ba%2520href%3D%26quot%3B%23%26quot%3B%2520data-toggle%3D%26quot%3Btooltip%26quot%3B%2520data-placement%3D%26quot%3Bleft%26quot%3B%2520title%3D%26quot%3BLeft%2520tooltip%26quot%3B%26gt%3BHover%26lt%3B%2Fa%26gt%3B%26lt%3Ba%2520href%3D%26quot%3B%23%26quot%3B%2520data-toggle%3D%26quot%3Btooltip%26quot%3B%2520data-placement%3D%26quot%3Bright%26quot%3B%2520title%3D%26quot%3BRight%2520tooltip%26quot%3B%26gt%3BHover%26lt%3B%2Fa%253C%2Fcode">
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="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3B%23%26quot%3B%2520data-toggle%3D%26quot%3Btooltip%26quot%3B%2520data-placement%3D%26quot%3Bauto%2520left%26quot%3B%2520title%3D%26quot%3BTo%2520the%2520left%3F%26quot%3B%26gt%3BHover%26lt%3B%2Fa%253C%2Fcode">
