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
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,W3.org 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: Help:Cursor