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’ edgesposX
,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 itcss
the CSS attributes array { property: ‘value’, … } which will replace the defaultstay
the length the popup should on before goes away on touch devices
Examples
[read-code path="/static/addhint-plugin/sample.html"]
Requirements
License
Available for use in all personal or commercial projects under both MIT and GPL licenses.
Copyright (c) 2012 Laszlo Molnar