Tooltip Utilities

NuvoUI provides a lightweight and customizable tooltip system that allows you to display helpful information when users hover over or focus on elements.

Configuration

Tooltips are styled using CSS custom properties that can be customized globally or on individual elements.

Parent Selector

All tooltip styles are scoped under the VAR.$parent-selector which can be configured to change the global selector context:

Tooltip Variables

The tooltip system uses the following configurable CSS custom properties:

These variables can be customized globally or targeted for specific tooltips or themes.

Basic Usage

Add tooltips to any element by adding the data-tooltip attribute with your tooltip content and role="tooltip" attribute:

Tooltip Positions

Control the position of your tooltips using the data-microtip-position attribute:

Position Variants

For more control, use position variants to align tooltips:

Tooltip Sizes

Control the width of tooltips with the data-microtip-size attribute:

Common Use Cases

Form Field Hints

Use tooltips to provide additional information about form fields:

Button Actions

Use tooltips to explain button actions:

Accessibility Information

Use tooltips to provide additional accessibility information:

Icon-Only Buttons

Provide context for icon-only buttons:

Interactive Elements

Tooltips are triggered by both hover and focus events, ensuring they work well with keyboard navigation:

Customizing Tooltips

You can customize the appearance of tooltips by overriding the CSS custom properties:

Tooltip Attributes Reference

The following data attributes control tooltip behavior:

Attribute	Description	Values
data-tooltip	The content of the tooltip	Any text
role="tooltip"	Required for tooltip functionality	tooltip
data-microtip-position	Controls tooltip position	top, top-left, top-right, bottom, bottom-left, bottom-right, left, right
data-microtip-size	Controls tooltip width	small, medium, large

CSS Custom Properties Reference

The following CSS custom properties can be customized:

Property	Default	Description
--tooltip-bg	rgba(17 17 17 / 90%)	Background color of tooltips
--tooltip-shadow-color	rgb(0 0 0 / 20%)	Shadow color of tooltips
--tooltip-text-color	#fff	Text color of tooltips
--microtip-transition-duration	0.18s	Duration of tooltip animations
--microtip-transition-easing	ease-in-out	Easing function for animations
--microtip-transition-delay	0s	Delay before animations start
--microtip-font-size	13px	Font size of tooltip text
--microtip-font-weight	normal	Font weight of tooltip text
--microtip-text-transform	none	Text transform for tooltip text
--tooltip-small-width	80px	Width for small tooltips
--tooltip-medium-width	150px	Width for medium tooltips
--tooltip-large-width	260px	Width for large tooltips
--tooltip-border-radius	4px	Border radius for tooltips

SCSS Mixins

NuvoUI provides a mixin for initializing tooltip variables:

Mixin	Description	Parameters
@include tooltip-variables	Sets up default tooltip CSS variables	None

Example SCSS Usage

Accessibility Considerations

• Tooltips provide supplementary information and should not contain critical content
• Use the role="tooltip" attribute to ensure proper semantics
• Always ensure that information is also available through other means for users who can't hover
• Tooltips work with keyboard focus as well as hover, making them accessible to keyboard users
• Consider using the aria-label or aria-labelledby attributes for more complex cases

Best Practices

1. Keep tooltip content concise and to the point
2. Use tooltips to provide helpful context, not to hide critical information
3. Position tooltips carefully to ensure they don't obscure other important content
4. Consider the mobile experience - tooltips should work with touch events or have alternative methods to access information
5. Use consistent styling for tooltips throughout your application to maintain design coherence