 |
 |
 |
 |
 |
 |
Free PHP Scripts
DbCon
vegUISiteKit - Using the animated tooltips
written by vegu on 16 Mar, 2007 11:35:56
One of the main reasons i started development of VSK was not that i wanted to create another javascript tool set (well not only) but was that i wanted a way to easily create little gadgets that people can integrate into their websites easily.The animated tool-tip library is a prime example of that. It allows you to have tooltips for any element in your document that will fade or morph into few when the user mouses over said element.
Simply include the needed libraries in the head of your HTML and start setting the vsk_ttip attribute on the elements that you want to have a tooltip.
Example:
code: html<span vsk_ttip="Hello world!">Greetings</span>
That should work right away, of course it is possible to tweak some things ;)
In order to select one of the two effect types (fade or morph) you have to set the VSK_TTIP_FX_TIME global variable somewhere in your javascript code.
code: js/* set fx type to fade, meaning the tooltip will use the fade effect to
* come in or out of view
*/
VSK_TTIP_FX_TYPE = 'fade';
/* set fx type to morph, meaning the tooltip will grow into view */
VSK_TTIP_FX_TYPE = 'morph';
/* no fx type */
VSK_TTIP_FX_TYPE = null;
When the morph effect is selected you might want to set up the maximum width of the tooltip so you don end up with tooltips that span the whole page.
You can define that value in the VSK_TTIP_MAX_WIDTH global variable, (default: 300px).
The effect time can also be set in the VSK_TTIP_FX_TIME global variable, (default: 200ms)
Tooltips on nodes other than span or a
By default the tooltip system only scans the span and a nodes. You can add any node type you like by adding it's name as a property of the VSK_TTIP object and setting it's value to true. Likewise you can disable tooltips on nodes by setting it to false or deleting the property.
Example:
code: js
/* enable tooltips on div nodes */
VSK_TTIP.div = true;
/* disable tooltips on span nodes */
VSK_TTIP.span = false;
Style of the tooltip
The tooltip node will have it's css className property set to 'vsk_tooltip' so in order to give the tooltip a styling simply create a vsk_tooltip class in your css ruleset :)
Related Posts
- No related posts
Your Comment
Comments
No comments yet.
