Example of a large tooltip from the Ikariam Wiki's Dump page
Tooltips are simple hover effects you can use to provide extra information to readers when they hover over certain elements on a page, such as text. This is most useful for adding context, expanding abbreviations, quick common term translations, and adding a description to terms on your community that may not be obvious to a general reader. They should only be used on text elements for best results, and should use the <abbr> tag rather than <div> or <span>.
Mobile devices are not able to "hover", as they have no pointing device. Therefore, you should only use tooltips to supply simple and additional information[1], and not rely on them to supply important content.
Step by step
In order to make a basic tooltip all you will have to do is surround the text you wish to have a tooltip with abbr tags containing the parameter title="text goes here!", like this:
<abbr title="This is a tool-tip!">Mouse-over me to see the tool-tip!</abbr>
To produce this (using the abbr tag):
- Mouse-over me to see the tool-tip!
You can also change the way the cursor looks when hovering over the same text or any other text by adding style="cursor:<cursor-style>;". For example:
- style="cursor:help;" will produce this:
- Mouse-over me to see the 'help' cursor.
- style="cursor:pointer;" will produce this:
- Mouse-over me 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