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]
Abbreviations[]
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:
- HTML
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:
- style="cursor:help;" will produce this:
- Hover over this text to see the 'help' cursor.
- style="cursor:pointer;" will produce this:
- Hover over this text to see the 'pointer' cursor.
See also[]
- Learn how to create a new page
- Learn how to modify text
- Learn how to make tables
Further help and feedback[]
- Browse and search other help pages at Help:Contents
- Check Fandom Community Central for sources of further help and support
- Check Contacting Fandom for how to report any errors or unclear steps in this article