Community Central
Community Central
Mouse-over tool-tip

Example of how a tooltip appears when hovering over the link in the second sentence on this page

Tooltips are blocks of text that appear when hovering over certain elements of a page. They are most common when hovering over links to show where the link will go if the reader clicks on it. For example, hovering over the link in the previous sentence will display "Help:Links" in the tooltip because clicking on the link will browse to that help page.

Custom tooltips can also be defined in HTML for other elements besides links. This is most useful for expanding abbreviations that a general reader may not be familiar with. This can be accomplished by using the <abbr> HTML tag as described below.

Mobile devices are not able to "hover" as they have no pointing device. Therefore, relying on tooltips to display information is discouraged by the HTML Living Standard since they do not satisfy accessibility needs.[1]


In order to define an abbreviation with a tooltip, surround the abbreviation with abbr tags containing the parameter title="text goes here!", like this:

<abbr title="Text goes here!">Hover over this text to see the tooltip!</abbr>

The above code produces the following output:

Hover over this text to see the tooltip!

For example, to display the text "HTML" with a tooltip that expands the abbreviation, the following code...

<abbr title="HyperText Markup Language">HTML</abbr>

...would produce the following output:


You can also change the way the cursor looks when hovering over the text by adding the inline CSS style="cursor:<cursor-style>;". For example:

  1. style="cursor:help;" will produce this:
    Hover over this text to see the 'help' cursor.
  2. style="cursor:pointer;" will produce this:
    Hover over this text to see the 'pointer' cursor.

See also[]

Further help and feedback[]