Upgrade to Pro
Get access to all features
- Advanced Analytics
- Team Collaboration
- API Access
Tooltips
Tooltips are powerful UI elements that provide contextual information and helpful hints when users hover over or focus on interface elements. They enhance user experience by offering instant guidance and additional details without cluttering the interface.
Basic Example
Enable tooltips using the data-bs-toggle="tooltip" attribute. Tooltips can be
enhanced with icons and styled to match your application's design.
Tooltip Directions
Position tooltips in four directions using data-bs-placement: top,
right, bottom, or left. Each direction is useful for
different UI layouts and space constraints.
Tooltips can include HTML content for rich formatting, icons, and multiple lines of text. Enable
HTML content using the data-bs-html="true" attribute.
Interactive Elements
Add tooltips to any interactive element to provide additional context. This is particularly useful for links, buttons, and form elements where extra guidance might be needed.
Custom Styled Tooltips
Customize tooltip appearance using CSS variables and custom classes. Create branded tooltips that match your application's design system.