Popovers & Tooltips

Popovers and tooltips provide contextual information overlays with smart positioning, collision detection, and multiple trigger modes. They're perfect for help text, additional details, interactive menus, and more. All components are fully accessible with keyboard navigation, ARIA attributes, and screen reader support.

New to Popovers?

Get up and running in 3 minutes with our Quick Start Guide!

View Quick Start Guide

Features
• Smart auto-positioning with collision detection
• Multiple trigger modes: click, hover, focus, or manual
• Customizable placement: top, bottom, left, right, or auto
• Smooth animations with fade and scale effects
• Color variants: primary, success, danger, warning, info, dark
• Responsive sizing and mobile-friendly interactions
• Close on outside click or Escape key
• Programmatic API: show, hide, toggle, updatePosition

ADA Compliance
• ARIA attributes for screen readers
• Keyboard accessible (Escape to close)
• Focus management
• Semantic markup
• High contrast support

Download RSL Example Pack

Basic Popovers (Click to Toggle)

Click the buttons below to show popovers with different placements.





    
    Popover Title
    
        Popover content goes here.

Tooltips (Hover to Show)

Hover over the elements below to see tooltips.





    
    This is a helpful tooltip!

Color Variants

Popovers support multiple color themes to match different contexts.



    
    Success
    Indicates successful completion.

Auto Positioning with Collision Detection

The placement="auto" option automatically finds the best position to avoid viewport edges.

Programmatic API

Control popovers programmatically using the RSL.Popover JavaScript API.


const trigger = document.getElementById('my-trigger');

// Show popover
RSL.Popover.show(trigger, {
    placement: 'top',
    animation: 'fade'
});

// Hide popover
RSL.Popover.hide(trigger);

// Toggle popover
RSL.Popover.toggle(trigger);

// Hide all popovers
RSL.Popover.hideAll();

Popovers in Grid Layouts

Popovers work seamlessly within RSL's grid system, perfect for dashboard help icons and contextual information.

Users

1,234

Revenue

$52K

Orders

487

Rating

4.8



    
        Users 
            
        
        1,234
    



    
    Active Users
    Total registered users.

ADA Compliance Features

Popovers are built with accessibility in mind from the ground up.

ARIA Attributes

role="tooltip" - Identifies element as tooltip/popover
aria-describedby - Links trigger to popover content
aria-expanded - Indicates popover visibility state
Popover IDs must be unique and referenced correctly

Keyboard Navigation

Click triggers: Spacebar or Enter to activate
Focus triggers: Tab to focus, automatic show/hide
Escape key closes all active popovers
Tab navigation maintains logical order

Visual Accessibility

High contrast borders and backgrounds
Clear visual indicators (arrows pointing to trigger)
Sufficient color contrast for all variants
Readable text size (14px base)

Touch & Mobile

Touch-friendly tap targets (minimum 44x44px)
Responsive sizing on small screens
Automatic repositioning to stay in viewport
Close on tap outside popover

Best Practices

When to Use Popovers

Help Icons: Provide additional context for form fields or UI elements
Feature Tours: Guide users through new features
Action Confirmations: Show warnings before destructive actions
Quick Forms: Collect simple input without full modals
Rich Tooltips: Display formatted content with headers and actions

When to Use Tooltips

Icon Buttons: Label icon-only buttons
Truncated Text: Show full text for truncated labels
Brief Help: One-sentence explanations
Keyboard Shortcuts: Display shortcuts on hover

Content Guidelines

Keep popover content concise (2-3 sentences max)
Use clear, plain language
Include action buttons when appropriate
Don't nest popovers inside other popovers
Test on mobile devices to ensure touch targets are adequate

Popover Examples