Tooltips

Tooltips

Tooltips are a quick way to provide Tooltips are awesome, you should totally use themextended information 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 I’m on bottom and the default positiontip-bottom, which is the default position, I’m on the top and I’m not roundedtip-top, I’m on the lefttip-left, or I’m on the tighttip-right 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.

Smallipop – A versatile jQuery plugin for displaying beautiful tooltips and interactive tours