Tooltips
Tooltips are a quick way to provide [tooltip align=»tip-bottom» text=»extended information» ]Tooltips are awesome, you should totally use them[/tooltip] on a term or action on a page.
Building With HTML Classes
Tooltips work cross browser and cross platform and are easily added to a page with a simple markup and class structure. You can apply the has-tip class to any element.
By default, the tooltip takes the width of the element that it is applied to, but you can override this behavior by applying a data-width attribute to the target element. The tooltip takes on the content of the targets title attribute.
The tooltips can be positioned on the [tooltip align=»tip-bottom» text=»tip-bottom» ]I’m on bottom and the default position[/tooltip], which is the default position, [tooltip align=»tip-top» text=»tip-top» (hehe)» ]I’m on the top and I’m not rounded[/tooltip], [tooltip align=»tip-left» text=»tip-left» ]I’m on the left[/tooltip], or [tooltip align=»tip-right» text=»tip-right» ]I’m on the tight[/tooltip] of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full width and bottom aligned.
[alert ]Remember: This tooltips with external link are not working on touch devices.[/alert]
Available class options:
tip-top: Align the tip above the element you attach it to.
tip-bottom: Align the tip below the element you attach it to.
tip-left: Align the tip to the left the element you attach it to.
tip-right: Align the tip to the right the element you attach it to.