tooltip_pro #

A powerful and flexible tooltip package for Flutter that goes beyond simple text. Create beautiful, highly customizable tooltips with rich content, shadows, blurs, and precise control over positioning and styling.

Features #

• ✨ Rich Content Support: Create tooltips with titles, descriptions, icons, or any custom widget.
• 📍 Flexible Positioning: Position tooltips TOP, BOTTOM, LEFT, or RIGHT of the target.
• 🎯 Arrow Customization: precise control over arrow direction, width, height, and offset.
• 🎨 Styling: Configure background colors, borders, shadows, and even background blur effects.
• 🏭 Factory Constructors: Built-in minimal, rich, and error factories for quick and beautiful presets.
• ⏳ Auto-dismiss: Optional auto-dismiss timer.
• 🛠️ Builders: Dynamic content generation using builders .

Getting started #

Add tooltip_pro to your pubspec.yaml:

dependencies:
  tooltip_pro: ^0.0.1

Usage #

Wrap any widget with TooltipPro to add a tooltip to it.

Basic Usage #

TooltipPro(
  tooltipContent: Text(
    "Hello World!",
    style: TextStyle(color: Colors.white),
  ),
  tooltipColor: Colors.black,
  child: Icon(Icons.info),
)

Minimal Tooltip #

Use the .minimal factory for simple text tooltips.

TooltipPro.minimal(
  text: "Copied to clipboard!",
  child: IconButton(
    icon: Icon(Icons.copy),
    onPressed: () {},
  ),
)

Rich Tooltip #

Use the .rich factory for more complex notifications or information.

TooltipPro.rich(
  title: "Feature Available",
  description: "You can now use the new improved search functionality.",
  icon: Icons.new_releases,
  child: Icon(Icons.info_outline),
)

Arrow Customization #

You can fully customize the arrow's size and position. This is useful when you want a specific look or need to align the arrow with a specific part of your UI.

TooltipPro(
  arrowWidth: 20.0,   // Customize width
  arrowHeight: 15.0,  // Customize height
  customArrowOffset: 0.5, // Center the arrow (0.0 to 1.0)
  direction: TooltipDirection.top,
  child: MyWidget(),
  // ... other properties
)

Error Tooltip #

TooltipPro.error(
  message: "Network connection lost.",
  child: Icon(Icons.wifi_off),
)

Configuration #

The TooltipPro widget offers extensive configuration options.

General #

Positioning & Dimensions #

Arrow Customization #

Styling #

Config Classes #

TooltipShadowConfig

TooltipShadowConfig({
  bool enabled = false,
  Color? color,       // Shadow color
  double elevation,   // Elevation strength
  double blurRadius,  // Blur amount
})

TooltipBlurConfig

TooltipBlurConfig({
  bool enabled = false,
  double sigma,         // Blur strength (default: 5.0)
  Color? color,         // Tint color for the blur
  bool includeChild,    // Whether to blur the child widget too (default: false)
})

TooltipBorderConfig

TooltipBorderConfig({
  bool enabled = false,
  Color color,        // Border color
  double width,       // Border width
  double radius,      // Corner radius
})