{"id":2550,"date":"2013-06-05T16:42:24","date_gmt":"2013-06-05T16:42:24","guid":{"rendered":"http:\/\/weblusive.com\/epic\/?page_id=2550"},"modified":"2013-06-05T16:42:24","modified_gmt":"2013-06-05T16:42:24","slug":"tooltips","status":"publish","type":"page","link":"https:\/\/www.pardosilver.com\/?page_id=2550","title":{"rendered":"Tooltips"},"content":{"rendered":"

Tooltips<\/h3>\n

Tooltips are a quick way to provide [tooltip align=\u00bbtip-bottom\u00bb text=\u00bbextended information\u00bb ]Tooltips are awesome, you should totally use them[\/tooltip]\u00a0on a term or action on a page.<\/p>\n

Building With HTML Classes<\/h3>\n

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<\/strong> class to any element.<\/p>\n

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<\/strong> attribute to the target element. The tooltip takes on the content of the targets title<\/strong> attribute.<\/p>\n

The tooltips can be positioned on the [tooltip align=\u00bbtip-bottom\u00bb text=\u00bbtip-bottom\u00bb ]I’m on bottom and the default position[\/tooltip], which is the default position, [tooltip align=\u00bbtip-top\u00bb text=\u00bbtip-top\u00bb (hehe)\u00bb ]I’m on the top and I’m not rounded[\/tooltip], [tooltip align=\u00bbtip-left\u00bb text=\u00bbtip-left\u00bb ]I’m on the left[\/tooltip], or [tooltip align=\u00bbtip-right\u00bb text=\u00bbtip-right\u00bb ]I’m on the tight[\/tooltip]\u00a0of 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.
\n[alert ]Remember: This tooltips with external link are not working on touch devices.[\/alert]<\/p>\n

Available class options:
\ntip-top<\/code>: Align the tip above the element you attach it to.
\ntip-bottom<\/code>: Align the tip below the element you attach it to.
\ntip-left<\/code>: Align the tip to the left the element you attach it to.
\ntip-right<\/code>: Align the tip to the right the element you attach it to.<\/p>\n

Smallipop – A versatile jQuery plugin for displaying beautiful tooltips and interactive tours<\/small><\/h3>\n