Tooltip Examples

Comprehensive demos showing all tooltip features and use cases

Position Variants

Tooltips can be positioned on any side of the trigger element. The position will automatically flip if there isn't enough space.

Position Variants • HTML

Color Variants

Use different color variants to match your design system or convey meaning.

Color Variants • HTML

Size Variants

Choose from three sizes depending on content length and importance.

Size Variants • HTML

Tooltips with Icons

Icons are perfect tooltip triggers for providing contextual help.

Notifications
Help Center
Settings
Icon Tooltips • HTML

Form Field Hints

Provide helpful hints for form fields without cluttering the interface.

Form Field Hints • HTML

Status Badges with Tooltips

Combine tooltips with badges for more detailed status information.

Active Warning Offline
Status Badges • HTML

Active

Warning

Offline

JavaScript API

Programmatically control tooltips with JavaScript for dynamic content.

HTML Setup • HTML
JavaScript API Methods • JavaScript

// Programmatically show tooltip
RSL.Tooltip.show(element);

// Programmatically hide tooltip
RSL.Tooltip.hide(element);

// Toggle tooltip visibility
RSL.Tooltip.toggle(element);

// Attach tooltip dynamically
RSL.Tooltip.attach('#my-element', {
    position: 'right',
    variant: 'primary',
    size: 'lg'
});

Accessibility Features

All tooltips are fully accessible out of the box with no additional configuration needed.

Try these interactions:

  • Mouse: Hover over the button
  • Keyboard: Tab to the button and it will show
  • Keyboard: Press Escape to dismiss
  • Touch: Tap to show (auto-hides after 3 seconds)
  • Screen Reader: Announced via aria-describedby
Automatic Accessibility Features • Reference

✅ Automatic ARIA attributes
   • role="tooltip"
   • id="tooltip-[unique-id]"
   • aria-describedby="tooltip-[unique-id]" (added to trigger)

✅ Keyboard Support
   • Tab to focus trigger → Tooltip shows
   • Escape key → Tooltip hides
   • Auto-adds tabindex="0" to non-focusable elements

✅ Focus Management
   • Shows on hover AND focus
   • Respects focus-visible for keyboard users

✅ Motion & Contrast
   • Respects prefers-reduced-motion
   • Respects prefers-contrast: high

✅ Touch Support
   • Tap to toggle on mobile
   • Auto-hide after 3 seconds