Tooltips are a quick way to provide extended 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 „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.

Remember: This tooltips with external link are not working on touch devices.×

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

Tooltip - style 1

Tooltip-style 2

Tooltip-style 3

Tooltip-style 4

Tooltip-style 5