Tooltip Menu

You can easily create a tooltip menu using our JavaScript Tooltip library.

Simply add an onmouseover or onclick event to each top-level menu item, as shown below:

<span onmouseover="tooltip.pop(this, '#sub1')">Maecenas</span>

When the mouse hovers over the menu item, a dropdown submenu appears as a tooltip, displaying the HTML content of the element with id="sub1" from a hidden <div> :

<div style="display: none">
    <!-- submenu#1 -->			
    <div id="sub1">
        <div class="column">
            <img src="src/tooltips-cd1.jpg" alt="" />
            <a href="#">Duis a risus metus</a>
            <a href="#">Nunc id ipsum felis</a>
            (...ommitted for brevity...)
        </div>
    </div>
    <!-- submenu#2 -->
    <div id="sub2">
        (...submenu for another top menu item. ommitted for brevity...)
    </div>
</div>

You can find the complete source code for this demo in the JavaScript Tooltip download package.