apptomate_custom_tooltip 0.0.1

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

CustomToolTip

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