Tooltips & Popovers
Tooltips & Popovers Overview
Tooltips and popovers are powerful UI components in Bootstrap 5 that provide additional information to users. Tooltips display small text hints when users hover over elements, while popovers show more detailed content in a small overlay.
This page demonstrates various implementations, placements, triggers, and advanced features of both components.
Tooltips
Small overlay text for elements
Basic Placements
Hover over the buttons below to see tooltips in different positions:
Tooltip Triggers
Different trigger options for tooltips:
HTML Content in Tooltips
Tooltips can contain HTML elements:
Tooltips on Disabled Elements
Wrap disabled elements in a span to enable tooltips:
Basic Tooltip Code:
Popovers
Larger overlay content with titles
Basic Placements
Click the buttons below to see popovers in different positions:
Popover Triggers
Different trigger options for popovers:
HTML Content in Popovers
Popovers can contain rich HTML content:
Dismissible Popovers
Popovers that can be dismissed by clicking outside or on a close button:
Basic Popover Code:
Advanced Examples
Real-world usage scenarios
Form Field Help
Navigation Hints
Status Indicators
Interactive Elements
Usage Guidelines
When to Use Tooltips
- Provide brief explanations for icons or buttons
- Show field validation messages
- Clarify abbreviations or technical terms
- Avoid for critical information users must see
When to Use Popovers
- Display additional details or options
- Show previews or summaries
- Present contextual menus or actions
- Don't overload with too much content
Accessibility Note
Always ensure tooltips and popovers are accessible. Use appropriate ARIA attributes and ensure keyboard navigation works properly. For screen readers, consider using aria-describedby or aria-labelledby attributes.