Tooltips are a quick way to provide extended informationon a term or action on a page.
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-tipclass 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-widthattribute to the target element. The tooltip takes on the content of the targets titleattribute.
The tooltips can be positioned on the "tip-bottom", which is the default position, "tip-top" (hehe), "tip-left", or "tip-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.
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.