Skip to main content

​
Overview

HuxTooltip component provides additional context when hovering over or long-pressing on widgets. It automatically adapts to light and dark themes and provides various positioning and styling options.

​
Basic Usage

The simplest way to use a tooltip is to wrap any widget with HuxTooltip: 
HuxTooltip(
  message: 'This is a helpful tooltip',
  child: Icon(Icons.info),
)

​
Variants

​
Standard Tooltip

The basic tooltip with customizable styling: Standard tooltip 
HuxTooltip(
  message: 'This is a tooltip message',
  child: HuxButton(
    onPressed: () {},
    child: Text('Save'),
  ),
)

​
Tooltip with Icon

For enhanced visual context, add an icon parameter to HuxTooltip. Tooltip with icon 
HuxTooltip(
  message: 'New feature',
  icon: Icons.info_outline,  // Icon appears inside the tooltip
  child: HuxButton(
    onPressed: () {},
    child: Text('Help'),
  ),
)

// Or with Lucide/Feather icons
HuxTooltip(
  message: 'Help information',
  icon: FeatherIcons.info,   // Lucide/Feather icons
  child: Icon(FeatherIcons.help),
)

​
Customization

​
Colors

Customize the tooltip appearance with your own colors: 
HuxTooltip(
  message: 'Custom styled tooltip',
  backgroundColor: Colors.deepPurple,
  textColor: Colors.white,
  child: Text('Hover me'),
)

​
Positioning

Control where the tooltip appears relative to the child: 
HuxTooltip(
  message: 'Tooltip above the element',
  preferBelow: false, // Show above instead of below
  verticalOffset: 20.0, // Increase distance from child
  child: Icon(Icons.info),
)

​
Timing

Adjust when and how long the tooltip appears: 
HuxTooltip(
  message: 'Quick tooltip',
  waitDuration: Duration(milliseconds: 200), // Show faster
  showDuration: Duration(seconds: 5), // Show longer
  child: Icon(Icons.info),
)

​
Advanced Styling

For complete control over the tooltip appearance: 
HuxTooltip(
  message: 'Custom styled tooltip',
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(16),
    border: Border.all(color: Colors.white, width: 2),
  ),
  textStyle: TextStyle(
    color: Colors.white,
    fontSize: 16,
    fontWeight: FontWeight.bold,
  ),
  padding: EdgeInsets.all(16),
  child: Icon(Icons.info),
)

​
Props

​
HuxTooltip

PropTypeDefaultDescription
messageStringrequiredThe text to display in the tooltip
childWidgetrequiredThe widget below this tooltip
backgroundColorColor?Theme surfaceBackground color of the tooltip
textColorColor?Theme textText color of the tooltip
preferBelowbooltrueWhether to prefer showing below the child
excludeFromSemanticsboolfalseWhether to exclude from semantics tree
verticalOffsetdouble10.0Vertical offset from the child
waitDurationDuration500msHow long to wait before showing
showDurationDuration3000msHow long to show the tooltip
decorationDecoration?Default themeCustom decoration for the tooltip
textStyleTextStyle?Default themeCustom text style
heightdouble?AutoHeight of the tooltip
paddingEdgeInsetsGeometry?12x8Padding inside the tooltip
marginEdgeInsetsGeometry?8Margin around the tooltip
richMessageInlineSpan?nullRich text message (overrides message)

​
HuxTooltip Icon Parameters

PropTypeDefaultDescription
iconIconData?nullThe icon to display alongside the message (rendered as an Icon widget)
iconColorColor?Theme text colorColor of the icon
iconSizedouble16.0Size of the icon

​
Examples

Provide context for form inputs: 
Row(
  children: [
    Expanded(
      child: HuxInput(
        label: 'Email Address',
        hintText: 'Enter your email',
      ),
    ),
    HuxTooltip(
      message: 'We\'ll use this to send you important updates',
      child: Icon(Icons.help_outline, color: Colors.grey),
    ),
  ],
)

​
Button Explanations

Explain button actions: 
HuxTooltip(
  message: 'This will permanently delete your account',
  icon: Icons.warning,
  child: HuxButton(
    onPressed: () {},
    variant: HuxButtonVariant.destructive,
    child: Text('Delete Account'),
  ),
)
Guide users through complex interfaces: 
HuxTooltip(
  message: 'Click to expand this section and see more options',
  child: HuxButton(
    onPressed: () {},
    variant: HuxButtonVariant.ghost,
    child: Icon(Icons.expand_more),
  ),
)

​
Best Practices

​
Content Guidelines

  • Keep messages concise: Tooltips should be brief and to the point
  • Use clear language: Avoid technical jargon unless necessary
  • Provide value: Only show tooltips when they add meaningful context

​
Accessibility

  • Semantic content: Tooltips are automatically included in the accessibility tree
  • Keyboard navigation: Tooltips work with keyboard navigation
  • Screen readers: Content is properly announced to assistive technologies

​
Performance

  • Lazy loading: Tooltips only render when needed
  • Efficient positioning: Smart positioning algorithms minimize layout calculations
  • Memory management: Proper cleanup when tooltips are dismissed

​
Theme Integration

  • Automatic adaptation: Tooltips automatically adapt to light/dark themes
  • Consistent styling: Uses Hux design tokens for consistent appearance
  • Customizable: Override theme colors when needed for specific use cases
  • Button - Add tooltips to buttons for better UX
  • Input - Provide help text for form fields
  • Card - Add context to card content
  • Badge - Explain badge meanings with tooltips
⌘I