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: