Tooltips
Tooltip utilities in the Phenix Design System allow you to add simple informational popups to elements when users hover over them, without requiring JavaScript.
Overview
Tooltips provide context or additional information for UI elements.
Usage
Add the .tooltip
class for a tooltip that appears above the element, or .tooltip-bottom
for one that appears below. The tooltip content is taken from the data-title
attribute, falling back to the title
attribute if data-title
is not present.
<!-- Default tooltip (appears on top) -->
<span class="tooltip" data-title="This is a tooltip that appears above.">Hover me (Top)</span>
<!-- Bottom tooltip -->
<span class="tooltip-bottom" data-title="This tooltip appears below the element.">Hover me (Bottom)</span>
<!-- Tooltip using the title attribute as fallback -->
<span class="tooltip" title="This content comes from the title attribute.">Hover me (Title Fallback)</span>
How It Works
The tooltip classes use CSS pseudo-elements (::before
and ::after
) to display the tooltip content. The content is styled with default padding, background, and text color.
Customization
Tooltip appearance (background, text color, border-radius) can be customized using CSS variables, if defined in the theme (check SCSS source for specifics).
Use Cases
- Providing definitions for icons or abbreviations.
- Giving brief instructions for form fields.
- Displaying full text for truncated elements.
<!-- Tooltip for an icon button -->
<button class="btn icon tooltip" data-title="Save your changes">
<i class="fas fa-save"></i>
</button>
<!-- Tooltip for an abbreviation -->
<p>Learn about <abbr class="tooltip" data-title="Cascading Style Sheets">CSS</abbr>.</p>
Best Practices
- Keep it brief: Tooltips should contain short, concise information.
- Don't rely on tooltips for critical info: Information essential for task completion should be visible directly in the UI.
- Use sparingly: Overuse of tooltips can clutter the interface.
Accessibility Considerations
- Keyboard Access: Pure CSS tooltips triggered by hover are generally not accessible via keyboard navigation.
- Screen Readers: Screen readers may not announce tooltip content reliably. The
title
attribute offers better accessibility support but might not be announced consistently either. - For accessible tooltips, especially those containing important information or interactive elements, consider using a JavaScript-based solution that handles focus management and ARIA attributes correctly.