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.
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 span tags containing the parameter title="text goes here!", like this:
<span title="This is a tool-tip!">Mouse-over me to see the tool-tip!</span>
This results in:
- 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.