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.
There are some more parameters that can be set on the element. The tooltip can be displayed on top of the element calling it or below it. To change the position, there’s a parameter called position that can be set with the values 1 (below the element) or -1(on top of the element).
One other this you could do is set the tooltip as sticky. To do that, set sticky:true on the element or the extra elements declared where you start the script.
Below is the complete list of parameters you can set:
* container: for inline declared tooltips, if you specify the container id, the script will search for tooltips in there; if not specified, it will scan the entire document if you provide it a CSS selector for the hovered parameter
* hovered: CSS selector for the tooltip elements. The css class is for the elements that display the tooltip when they are hovered
* extra: this parameter contains the elements you choose to manually add. To add extra elements, set this parameter as:
extra:{
0: {
’id’:'extra’,
’text’:'this text is added manually using the extra.text parameter.’,
’position’:-1,
’sticky’:false
},
1: {
’id’:'other_extra’,
’ajax’:'ajax.php’,
’ajax_message’: ‘Loading… please wait.’,
’position’:1,
’sticky’:false
}
}
As you can see, for each element add to the extra parameter, you need to pass a few things. Except for the id, all the other parameters on each element are the same as the ones used on the inline declared elements.
* ToolTipClass: CSS class for the tooltips. This is a global parameter, all tooltips declared within a class instance will have the same CSS class. The tooltip HTML structure is as follows:
<div class="someCLass">
<div class="dockBottomHeader">This is the header.</div>
<div class="message">This is where the content is displayed.</div>
<div class="dockBottomFooter">This is the footer.</div>
</div>
Except for the container CSS class ( this parameter’s value ), all other classes must be kept in the stylesheet. Also, the close buton CSS class must remain as is ( .sticky_close ) and the AJAX preloader class ( .loading ).
* toolTipPosition: besides setting the tooltip position on each element, you can use this parameter to define a default position for all the tooltips. This way, if one of the elements doesn’t have a position set, this one will be used. It can take as values -1 (on top) or 1 (on bottom)
* showDelay: tooltips can be delayed on showing. Basically, this will prevent the tooltips to display if the user passes the cursor over to get to another element, without the intention to hover the element having the tooltip.
* sticky: same as toolTipPosition, you can set this parameter to be the default value if sticky is not set on any of the elements that must display tooltips
* fromTop: distance in pixels from the element. By default, the tooltip takes as coordinates the element coordinates. If you need to display it a little further from the element, give this parameter a value. This applies to all tooltips declared on a class instance
* fromLeft: same as fromTop, but it controls the horizontal position of the tooltip
* duration: the tooltips fading/moving duration in milliseconds. Applied to all tooltips declared on a class instance.
* fadeDistance: on mouse out or close, the tooltip fades and moves away from the element. This variable determines how far from the element it will move.
Giving the fact that the tooltips can be positioned on top or bottom of the elements calling them, if by design they point at the element, the script will need to do some changes. As stated above, the inner divs for the tooltip header, message and footer have the CSS classes predetermined and I suggest not to change their names. When the tooltip displays below the element, it will have to point up. In the example page, the below display is set as default. For the tooltips displaying above the element, there are separate CSS classes that are switched for the default ones to make the tooltip point down at the element calling it. These CSS classes are: dockTopHeader and dockTopFooter and must have the same name in your stylesheet.
Demo: http://www.php-help.ro/examples/mootool ... -tooltips/
Download Source:
[hide]http://www.php-help.ro/wp-content/uploa ... oltips.zip[/hide]
Thanks
