Popovers & Tooltips - Quick Start Guide

3-Minute Setup

1 Include Files (Add to `<head>`)

2 Create Your First Popover







    
    Popover Title
    
        Your popover content goes here!

✓ Done! You now have a working popover. Click the button to see it!

Common Patterns

1. Help Icon Tooltip (Hover)



    Email Address 
    



    
    We'll never share your email

2. Dashboard Metric Info



    Active Users 
    



    
    Active Users
    
        Total users who logged in this month

3. Destructive Action Confirmation





    
    Are you sure?
    
        This action cannot be undone.

4. Feature Tour Step


// Show programmatically for tour
const trigger = document.getElementById('feature-button');
RSL.Popover.show(trigger, {
    placement: 'bottom',
    animation: 'scale'
});

5. Hover for More Details



    Premium Plan



    
    Premium Features
    
        • Unlimited storage

        • Priority support

        • Advanced analytics

6. Auto Positioning with Collision Detection





    
    Smart Positioning
    
        This popover automatically chooses the best placement
        based on available space. Try scrolling or resizing
        the window to see it reposition!

Tip: Use placement="auto" for elements near viewport edges. The popover will automatically choose the best position (top, bottom, left, or right) to stay visible.

Quick Reference

Data Attributes

Attribute	Values	Description
`data-toggle`	`popover` \| `tooltip`	Required. Enables popover/tooltip
`data-placement`	`top` \| `bottom` \| `left` \| `right` \| `auto`	Where to show popover
`data-trigger`	`click` \| `hover` \| `focus` \| `manual`	How to trigger popover
`aria-describedby`	ID of popover element	Links trigger to popover (required)
`data-animation`	`fade` \| `scale` \| `none`	Animation type
`data-offset`	Number (pixels)	Distance from trigger (default: 10)

Color Variants

Class	Color	Best For
`popover-primary`	Brand Purple	Key actions, brand messaging
`popover-success`	Green	Confirmations, positive feedback
`popover-danger`	Red	Warnings, destructive actions
`popover-warning`	Yellow	Cautions, important notices
`popover-info`	Cyan	Helpful information, tips
`popover-dark`	Dark Gray	Dark mode interfaces

Size Modifiers

Class	Max Width
`rsl-popover-sm`	200px
`rsl-popover`	276px (default)
`rsl-popover-lg`	400px

JavaScript API


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

// Show popover
RSL.Popover.show(trigger, {
    placement: 'top',      // 'top', 'bottom', 'left', 'right', 'auto'
    offset: 10,            // Distance from trigger
    animation: 'fade',     // 'fade', 'scale', 'none'
    onShow: function(popover, trigger) {
        console.log('Popover shown');
    },
    onHide: function(popover, trigger) {
        console.log('Popover hidden');
    }
});

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

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

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

// Update popover position (useful after scroll/resize)
RSL.Popover.updatePosition(trigger);

// Update all active popovers
RSL.Popover.updateAll();

// Re-initialize popovers (useful for dynamically added elements)
RSL.Popover.init();

Custom Events


// Listen for popover show
document.addEventListener('popover:show', function(e) {
    const { popover, trigger } = e.detail;
    console.log('Popover shown:', popover);
});

// Listen for popover hide
document.addEventListener('popover:hide', function(e) {
    const { popover, trigger } = e.detail;
    console.log('Popover hidden:', popover);
});

Troubleshooting

Popover Won't Show?

Check: aria-describedby matches popover ID exactly
Check: Popover has class="rsl-popover"
Check: popover.js is loaded after DOM
Check: Trigger has data-toggle="popover"

Position is Wrong?

Try data-placement="auto" for automatic positioning
Check if parent has overflow: hidden or positioning issues
Call RSL.Popover.updatePosition(trigger) after layout changes

Popover Behind Other Elements?

Popover has z-index: 1060 by default
Increase if parent has higher z-index context
Check position and z-index of parent elements

Click Outside Not Closing?

Check console for JavaScript errors
Ensure popover.js loaded successfully
Make sure trigger mode is click not manual

Pro Tips

✨ Tip 1: Use placement="auto" for popovers near viewport edges—it automatically finds the best position

✨ Tip 2: For tooltips, use data-toggle="tooltip" instead of data-toggle="popover" for automatic hover behavior

✨ Tip 3: Always include the arrow div—it provides visual connection to the trigger

✨ Tip 4: For long content, use rsl-popover-lg class for a wider popover

✨ Tip 5: Add data-offset="20" to increase space between trigger and popover

✨ Tip 6: Use popover:show and popover:hide events for analytics tracking

ADA Compliance Built-In

Popovers are fully accessible out of the box:

✅ ARIA roles (role="tooltip") for screen readers
✅ aria-describedby links trigger to content
✅ aria-expanded indicates open/closed state
✅ Keyboard navigation (Escape closes popovers)
✅ Focus management for interactive popovers
✅ High contrast colors meet WCAG AA standards

Next Steps

See It In Action

Open popover.html in your browser

Copy Examples

Use playground.html as a template

Advanced Use

Combine with RSL grids, cards, and modals for powerful UIs

Popover