Basic Tooltip Example

On this page we show how to set up a basic tooltip using JavaScript Tooltips.

A basic tooltip will typically display information about the destination when a link is hovered over. Hover over this example tooltip link, and this one. They are set up as follows:

<a href="." class="showTip link1">tooltip link</a>
<a href="/" class="showTip link2">this one</a>

Tooltip content is set up in dw_Tooltip.content_vars. This keeps it out of markup and easy to maintain. This is how content for the links above is specified:

dw_Tooltip.content_vars = {
    link1: 'Tooltip content for link 1',
    link2: 'Our content for tooltip link 2'
}

Documentation and Download

Examples in the download file demonstrate how to proceed from this point, to display images or images with text, to add properties like hoverable, and more. The documentation includes basic instructions plus information about more advanced features of the code.