Pure CSS Tooltips - CSS Demos

1. Tooltip Positions

Tooltips can appear on any side of an element

How it works: Uses the data-tooltip attribute with CSS ::before pseudo-element to create the tooltip content, and ::after for the arrow. Position is controlled with absolute positioning relative to the parent.

2. Color Schemes

Different color variants for semantic meaning

3. Icon Tooltips

Commonly used with icon-only buttons for accessibility

Accessibility: Icon-only buttons should always have tooltips or aria-label attributes to ensure screen reader users understand their purpose.

4. Multi-line Tooltips

Tooltips can contain longer text that wraps to multiple lines

5. Tooltip Sizes

Small, medium (default), and large tooltip sizes

6. In-text Tooltips

Tooltips can be applied to inline text elements for contextual help

The HTML standard is maintained by the W3C. Modern web development also uses CSS and JavaScript to create interactive experiences.

7. Form Field Help

Use tooltips to provide contextual help for form inputs

8. All Directional Variations

Complete demonstration of all tooltip positions with different colors

Top Tooltips

Right Tooltips

Bottom Tooltips

Left Tooltips

9. Special Effects

Enhanced tooltips with glow and animation effects

10. Practical Use Cases

Dashboard Actions

Data Table Actions

Item	Status	Actions
Project Alpha	Active
Project Beta	Pending

11. Accessibility Best Practices

Key Accessibility Features:

✓ Tooltips appear on both :hover and :focus-visible
✓ All tooltip triggers have tabindex="0" to make them keyboard accessible
✓ Using cursor: help to indicate additional information is available
✓ Icon-only buttons always include descriptive tooltip text
✓ Color is not the only indicator of meaning (text labels provided)

Important Note: Pure CSS tooltips are great for simple use cases, but for critical information or complex interactions, consider:

Using aria-describedby with JavaScript-enhanced tooltips
Ensuring tooltips don't hide critical information
Providing alternative ways to access tooltip content on touch devices
Testing with screen readers and keyboard navigation

12. Implementation Guide

Basic HTML Structure:

<button class="tooltip tooltip-top"
        data-tooltip="Your tooltip text"
        tabindex="0">
    Hover me
</button>

CSS Classes:

.tooltip - Base tooltip class (required)
.tooltip-[top|right|bottom|left] - Position (required)
.tooltip-[primary|success|warning|danger|info|light] - Color scheme (optional)
.tooltip-multiline - Allow text wrapping (optional)
.tooltip-[small|large] - Size variants (optional)
.tooltip-glow - Add glow effect (optional)
.tooltip-bounce - Add bounce animation (optional)

Advantages:

✓ No JavaScript required
✓ Lightweight and performant
✓ Easy to implement and maintain
✓ Smooth CSS animations