tooltip

MooTooltips gives you the possibility to create bubble tooltips on HTML elements in an easy manner and with the possibility to set each tooltip’s behavior individually. It’s also possible to display as tooltip content the content of an HTML element from the page, some text you want to input or the result of AJAX calls.

Tooltips can be set directly on the rel parameter of any HTML element and simultaneously when you create a new class instance.

For example, if tooltips are set directly on the element (let’s say an anchor), the rel parameter will have a value like: <a … rel=”{content:’some_element_id’}” and that’s it. The tooltip displayed will have as content the ’some_element_id’ content. Or if you there’s only the need to display some text, it will look like this: <a … rel=”{text:’Some text I want to display in my tooltip’}”. AJAX calls are also simple. To display the tooltip with some remote AJAX retrieved content, simply use as rel the following: <a … rel=”{ajax:’some_page.html’}”.

To start the inline declared tooltips, a CSS selector is needed so basically all tooltips declared on page must have the same CSS class in order to get the script started. Optionally, there’s the possibility the pass a container for the tooltips; if none is provided, the script will scan the entire document. (more…)