Composite
Tooltip Hybrid
Brief contextual text that appears on hover and focus. For supplementary hints — never the primary explanation. Reveals on hover after a short delay, on focus immediately, on touch via long-press.
About
Overview
Tooltips show short text labels next to icon buttons, abbreviations, or anything where a tiny extra hint helps. The trigger is always interactive (a button or link), the tooltip is always supplementary — never put critical information in a tooltip alone, because touch users may not see it.
Tooltip vs Popover vs Hover Card. Tooltip = short text. Popover = rich content + keyboard interaction. Hover Card = preview content with a slightly longer hover delay (think Twitter profile previews).
Live
Demo
Hover or focus the buttons below.
<button class="ren-btn ren-btn-secondary ren-tooltip-trigger" type="button">
Save
<ren-tooltip placement="top">⌘S</ren-tooltip>
</button>Placements
Variants
Four placements via placement="top|right|bottom|left" (default top). The component flips to the opposite side automatically when there isn't room.
Default hover delay is 500 ms. Override it with show-delay="700" for less-interruptive contexts.
Reference
API
CSS classes
| Class | Effect |
|---|---|
.ren-tooltip | The floating bubble. role="tooltip". Dark surface on light theme, light on dark. |
.ren-tooltip-arrow | Optional arrow pointing at the trigger. |
Web Component attributes
| Attribute | Type | Default | Notes |
|---|---|---|---|
placement | "top" | "right" | "bottom" | "left" | "top" | Preferred side. Auto-flips when there isn't room. |
show-delay | number (ms) | 500 | Delay before showing the tooltip. |
hide-delay | number (ms) | 0 | Delay before hiding the tooltip. |
Inclusive by default
Accessibility
- Trigger must be focusable. Tooltips on a non-interactive element aren't keyboard-reachable.
- Use
aria-describedbylinking the trigger to the tooltip'sid. Screen readers announce the tooltip after the trigger's accessible name. - Show on focus, not just hover. Keyboard users never trigger a hover.
- Dismissable with Escape. Pressing Escape while the tooltip is open closes it.
- Don't put essential info in a tooltip. Touch users may never see it. Pair the tooltip with a visible label or icon-with-text on small viewports.
Keyboard
Patterns
Examples
Icon-only button with hint
<button class="ren-btn ren-btn-ghost ren-tooltip-trigger" type="button" aria-label="Settings">
<!-- gear SVG -->
<ren-tooltip placement="bottom">Settings</ren-tooltip>
</button>Keyboard shortcut hint
<button class="ren-btn ren-btn-primary ren-tooltip-trigger" type="button">
Save
<ren-tooltip>⌘S to save</ren-tooltip>
</button>