AddHint plugin

With this plugin you can display tooltips on hovering an element. You are not limited to simple texts. You can use HTML formatting even in the title attribute. Or you can generate the content by javascript and pass to the plugin. The content can be aligned to the target’s any edge, and will make sure the popup not goes off-screen.

The popup will not go away as long as you hover the mouse over it, or an input element inside has focus. Will also take care of the touch devices, where no mouse leave event exists, and will fade the popup automatically after 3 seconds (configurable).

Syntax

$(layer).addHint(content, { options });

• content: text, html or jQuery element

options

• gap the distance between the two elements’ edges
• posX, posY reference point of the element to be aligned
  0 = ALIGN_LEFT | 1 = ALIGN_CENTER | 2 = ALIGN_RIGHT,
  0 = ALIGN_TOP | 1 = ALIGN_MIDDLE | 2 = ALIGN_BOTTOM
• toX, toY reference point of the target element ( the same as above )
• id the class name of the popup element if you wish to style it
• css the CSS attributes array { property: ‘value’, … } which will replace the default
• stay the length the popup should on before goes away on touch devices

Examples

[read-code path="/static/addhint-plugin/sample.html"]

Requirements

jQuery 1.7 or higher

License

Available for use in all personal or commercial projects under both MIT and GPL licenses.

Copyright (c) 2012 Laszlo Molnar