This page shows an example of tooltips used with menus.
WebDDM is built-in with tooltip functionality - WebDDM is the first menu software EVER to support dynamic tooltips, and many other companies are copying this feature. We use domTT for the tooltip library.
This page doesn't scratch the surface of domTT's features and usage. For your convenience and reference, the original domTT package has been included with WebDDM and the examples can be found here. To make tooltips work, you must include one JavaScript libary found in the js/ directory. Your code should look something like this if you need to use tooltips:

<script src="js/core.WebDDM.compressed.js"></script>
<script src="js/domTT.WebDDM.compressed.js"><!-- For tooltips --></script>
<script src="js/alphaAPI.WebDDM.compressed.js"><!-- For fading tooltips (OPTIONAL) --></script>

These are the attributes you can use to customize your tooltips.

• content - The HTML that will be placed inside of the tooltip. Similar to the WebDDM "content" attribute.
• caption - If set, this will be the caption text above the content cell of the tooltip.
• closeLink - The text that is displayed as a "close" button for sticky tooltips. Defaults to "X".
• type - The default tooltip type is "greasy". There are three types: "greasy". Default tooltip behaviour - the tooltip closes when you move off the parent. "sticky": The tooltip does not close until you click a close link. "velcro".: The tooltip does not close until you move the mouse over it, and off again.
• drag - This is a boolean (true or false) attribute that defaults to FALSE. This only applies to sticky tooltips. If it is set to TRUE, you can drag the tooltip with the caption bar. If it is set to FALSE, you cannot drag it.
• direction - The direction of the tooltip, in relation to the mouse. It defaults to "southeast". Possible values: "northeast", "northwest", "southeast", "southwest", "north-center", "south-center", "center-east", "center-west".
• showDelay - Defaults to 0. Sets a delay in milliseconds of time before the tooltip is displayed.
• lifetime - Time in milliseconds that the tooltip is visible before it is hidden again.
• trailMouse - If set to true, the tooltip will follow the mouse. If set to anything else it will not. Defaults to true.
• gridX - Sets a grid for the tooltip to snap to while trailing the mouse. This attribute defaults to 0, and is only applicable when the tooltip is trailing the mouse.
• gridY - Sets a grid for the tooltip to snap to while trailing the mouse. This attribute defaults to 0, and is only applicable when the tooltip is trailing the mouse.
• offsetY - Offset on the Y axis from the mouse. Defaults to 2.
• offsetX - Offset on the X axis from the mouse. Defaults to 0.
• x - Sets the absolute position of the tooltip on the X axis. Overrides the "trailMouse" and "offsetX" attributes if set.
• y - Sets the absolute position of the tooltip on the Y axis. Overrides the "trailMouse" and "offsetY" attributes if set.
• classPrefix - The CSS class prefix.
• maxWidth - Sets the maximum width a tooltip can be.

View CSS file - View JavaScript file. Plugins: Last - Next