Tipsy is a stack that lets you easily create good-looking tooltips on a web page. When a visitor to your web page hovers the mouse pointer over some words, the tooltip is shown.
Tooltips help to place more information on your web pages without making your web pages look cluttered. They can also provide “hints”, or little nuggets of information to your visitors.
Start by selecting some words.
In the URL field, enter “#” (without the quotes), then click on the plus sign, and enter “id” in the Name field, and a unique value for the Value field. In this example, I will use the value of “myID”. Click “Set Link” when you’re done.
Drag in a Tipsy Stack into your page, if you haven’t already done so.
Drag an Image Stack, or a Text Stack, into Tipsy Stack, and populate it with what you want the tooltip to say. Here, I used a Left Floating Image Stack.
In Tipsy’s configuration options, there is an option called “ID to bind to”. Enter the value you have chosen above here. In this example, I’ll enter myID.
Click Preview. When you mouse over the link, a tooltip will appear.
ID to bind to - This is an important value. It connects to tooltip to a link on the page. Put the ID of the link to connect to, here.
Theme - Tipsy comes in 4 slightly different looks.
Width - Controls the width of the tooltip.
Delay - Controls how fast the tooltip appears when the mouse pointer goes over the link.
Time to disappear - When the mouse pointer leaves the link, usually the tooltip disappears immediately. You can change how fast the tooltip disappears here. My suggestion is to keep this value small.
Position - This controls where, whenever possible, the tooltip should appear in relation to the link. Possible values are ’after’, ‘above’, ‘below’, ‘before’. Please note that the quotes are required.
Text alignment - This controls the alignment of the text inside the tooltip. Possible values are left, center, right. No quotes are required here.