CSS Tooltip

Top

Lorem Ipsum

• Aliquam ac odio ut est
• Cras porttitor orci

Left

Want more control?

Try our JavaScript tooltip, which lets you customize how it opens and closes, and offers multiple ways to load content.

Right

Fade in Effect

• This demo has fade in/out effect.
• It is using CSS opacity, visibility, and transition property to toggle the tooltip.
• Other demos are using display property(none or block) for the toggle.

bottom

CSS Tooltip

The CSS tooltip appears when user moves the mouse over an element, or when user tap the element with a mobile device.

Demo Source Code:     TOP RIGHT BOTTOM LEFT

HTML

CSS

Features

• Pure CSS solution, no JavaScript required
• Supports HTML content (including links)
• Allows seamless mouse movement between the target and tooltip popup without hiding the tooltip
• Supports top, right, bottom, and left positions