CustomToolTip

Flutter Dart

A highly customizable and interactive tooltip widget for Flutter applications with smooth animations and flexible styling options.

Features ✨

  • 🎨 Fully customizable - Colors, text styles, padding, and more
  • ⏱ Timing control - Adjust show/hide durations
  • 🖱 Multiple triggers - Hover (desktop) and long press (mobile)
  • 📏 Auto-sizing - Handles text wrapping and max width constraints
  • 🎥 Smooth animations - Fade in/out with customizable curves
  • � Arrow indicator - Visual pointer to the target element
  • 🌓 Dark/light ready - Works with any theme

Installation 📦

Add this to your pubspec.yaml:

dependencies:
  apptomate_custom_tooltip: ^0.0.1

Then run:

flutter pub get

Basic Usage 🚀

CustomToolTip(
  message: 'This is a helpful hint',
  child: Icon(Icons.help_outline),
)

Customization Options ⚙️

Parameter Description Default
message Tooltip text content required
child Widget that triggers the tooltip required
backgroundColor Background color Colors.black87
textStyle Text styling TextStyle(color: Colors.white, fontSize: 14)
padding Inner padding EdgeInsets.symmetric(horizontal: 12, vertical: 8)
borderRadius Corner radius 8.0
arrowColor Arrow color Same as background
showDuration How long tooltip stays visible 2 seconds
waitDuration Delay before showing 500 milliseconds
maxWidth Maximum width before text wraps 200

Advanced Examples 🎨

Styled Tooltip

CustomToolTip(
  message: 'Important information!',
  backgroundColor: Colors.deepPurple,
  textStyle: TextStyle(
    color: Colors.white,
    fontSize: 16,
    fontWeight: FontWeight.bold,
  ),
  padding: EdgeInsets.all(16),
  borderRadius: 12,
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Hover Me'),
  ),
)

Custom Timing

CustomToolTip(
  message: 'Appears quickly, stays longer',
  showDuration: Duration(seconds: 5),
  waitDuration: Duration(milliseconds: 200),
  child: Icon(Icons.timer),
)

Best Practices ✅

  1. For accessibility:

    CustomToolTip(
  message: 'Descriptive text for screen readers',
  child: Semantics(
    label: 'Button with tooltip',
    child: IconButton(...),
  ),
)

  2. For performance:

    • Use const constructors for static child widgets
    • Avoid extremely long show durations

  3. For responsive design:

    maxWidth: MediaQuery.of(context).size.width * 0.7,

  4. For consistency:

    • Create a reusable styled tooltip component
    • Use theme colors for better dark/light mode support

Troubleshooting 🛠

Issue: Tooltip not appearing
Fix: Ensure the widget has enough space to render and check trigger method (hover vs long press)

Issue: Text clipping
Fix: Increase maxWidth or reduce padding/font size

Issue: Animation jank
Fix: Avoid complex widgets in tooltip content

Libraries

apptomate_custom_tooltip