Have you ever seen pages or tables that had mouse-over tool-tips that would appear when you hovered your mouse over certain words or phrases. Have you ever wondered how they did this?
Then you have come to the right page to lean how to do basic mouse-over tool-tips.
Step-by-step
In order to make the basic mouse-over tool-tip all you will have to do is surround the text you wish to have the tool-tip with span tags containing the parameter title="text goes here!" within the opening span tag, like this <span title="This is a tool-tip!">Mouse-over me to see the tool-tip!</span> and you will get:
- 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 using the same method above and by adding the following parameter style="cursor:cursor-style;" to the opening span.
- style=cursor:"auto;" or style=cursor:"text;"will produce this:
- Mouse-over me.
- style=cursor:"crosshair;" will produce this:
- Mouse-over me.
- style=cursor:"default;" will produce this:
- Mouse-over me.
- style=cursor:"help;" will produce this:
- Mouse-over me.
- style=cursor:"move;" will produce this:
- Mouse-over me.
- style=cursor:"pointer;" will produce this:
- Mouse-over me.
- style=cursor:"progress;" will produce this:
- Mouse-over me.
- style=cursor:"wait;" will produce this:
- Mouse-over me.
For those re-size arrows you would use the following:
- style=cursor:"e-resize;" or style=cursor:"w-resize;" will produce this:
- Mouse-over me.
- style=cursor:"n-resize;" or style=cursor:"s-resize;" will produce this:
- Mouse-over me.
- style=cursor:"ne-resize;" or style=cursor:"sw-resize;" will produce this:
- Mouse-over me.
- style=cursor:"nw-resize;" or style=cursor:"se-resize;" will produce this:
- Mouse-over me.
See also
- Learn how to create a new page
- Learn how to modify text
- Learn how to make tables