components/tooltips/flutstrap_tooltip library Components Overlays

Flutstrap Tooltip

A highly customizable, accessible tooltip with Bootstrap-inspired styling, smooth animations, and intelligent positioning.

{@tool snippet}

Basic Usage

FlutstrapTooltip(
  message: 'This is a tooltip',
  child: Text('Hover me'),
)

Advanced Configuration

FlutstrapTooltip(
  message: 'Danger action',
  variant: FSTooltipVariant.danger,
  placement: FSTooltipPlacement.bottom,
  showDelay: Duration(milliseconds: 500),
  maxWidth: 300,
  child: IconButton(
    icon: Icon(Icons.delete),
    onPressed: () => _deleteItem(),
  ),
)

With Error Boundary

FlutstrapTooltip.buildWithErrorBoundary(
  message: complexMessage,
  child: MyComplexWidget(),
  fallback: Text('Tooltip unavailable'),
)

{@end-tool}

Performance Features

  • Intelligent Caching: Text measurements cached for identical tooltips
  • Debounced Interactions: Prevents rapid show/hide cycles
  • Memory Management: Proper timer and overlay disposal
  • Efficient Positioning: Optimized offset calculations

Accessibility

  • Full screen reader support with semantic labels
  • Keyboard navigation with focus management
  • Touch, hover, and focus trigger support
  • Long press support for mobile devices

Trigger Methods

Tooltips can be triggered by:

  • Hover (desktop/mouse)
  • Tap (mobile/touch)
  • Focus (keyboard navigation)
  • Long Press (alternative mobile)

Best Practices

  • Keep tooltip messages concise and actionable
  • Use appropriate variants for message urgency
  • Test positioning on different screen sizes
  • Consider mobile touch interactions
  • Use error boundaries for dynamic content

Classes

FlutstrapTooltip
Flutstrap Tooltip
FlutstrapTooltipState

Enums

FSTooltipPlacement
Flutstrap Tooltip Placement
FSTooltipVariant
Flutstrap Tooltip Variants