CSS Tooltips
CSS Tooltips are a great way to display extra information about something when the user moves the mouse cursor over an element.
Basic Tooltip Example
Let’s create basic tooltip that appears when the cursor of the mouse moves over an element.
See this example:
By using tooltips, you can display the position of the tooltip information in four ways:
- Top of the element
- Left side of the element
- Right side of the element
- Bottom of the element
Top Tooltip
The top tooltip specifies that if you move your mouse cursor over the element, the tooltip information will be displayed on the top of the element.
See this example:
Bottom Tooltip
The bottom tooltip specifies that if you move your mouse cursor over the element, the tooltip information will be displayed on the bottom of the element.
See this example:
Left Tooltip
The left tooltip specifies that if you move your mouse cursor over the element, the tooltip information will be displayed on the left side of the element.
See this example:
Right Tooltip
The right tooltip specifies that if you move your mouse cursor over the element, the tooltip information will be displayed on the right side of the element.
See this example: