Skip to content

A highly customizable tooltip widget for Flutter applications, offering rich functionality for both desktop and mobile platforms.

License

Notifications You must be signed in to change notification settings

thorizer/custom_tooltip

Repository files navigation

Custom Tooltip

A highly customizable tooltip widget for Flutter applications, offering rich functionality for both desktop and mobile platforms.

mpvnet_sW3NuBsQJ2

Features

  • Flexible Content: Supports any widget as both the child and tooltip content.
  • Customizable Appearance:
    • Adjustable tooltip width and height
    • Customizable background color
    • Configurable border radius
    • Custom padding
    • Adjustable elevation
    • Option for custom decoration
    • Customizable text style
  • Smart Positioning: Automatically adjusts position to fit within screen bounds
  • Timing Control:
    • Configurable hover delay before showing tooltip
    • Adjustable show and hide durations for smooth animations
  • Platform-Specific Behavior:
    • Hover functionality for desktop and web platforms
    • Touch support for mobile platforms
  • Interactive Features:
    • Tooltip can be pinned on tap/click
    • Tapping outside the tooltip dismisses it
  • Animated Display: Smooth fade-in and fade-out animations

Getting Started

Add this to your package's pubspec.yaml file:

dependencies:
  custom_tooltip: ^1.0.0

Usage

Import the package in your Dart code:

import 'package:custom_tooltip/custom_tooltip.dart';

Basic usage:

CustomTooltip(
  child: Text('Hover or tap me'),
  tooltip: Text('This is a custom tooltip'),
  tooltipWidth: 200,
  tooltipHeight: 100,
  backgroundColor: Colors.blue,
  borderRadius: 8,
  padding: EdgeInsets.all(8),
  elevation: 6.0,
)

Advanced usage with more customization:

CustomTooltip(
  child: Icon(Icons.info),
  tooltip: Column(
    children: [
      Text('Custom Tooltip'),
      SizedBox(height: 10),
      ElevatedButton(
        child: Text('Action'),
        onPressed: () {
          // Handle button press
        },
      ),
    ],
  ),
  tooltipWidth: 250,
  tooltipHeight: 150,
  backgroundColor: Colors.black87,
  borderRadius: 12,
  padding: EdgeInsets.all(12),
  elevation: 8,
  hoverShowDelay: Duration(milliseconds: 500),
  showDuration: Duration(milliseconds: 300),
  hideDuration: Duration(milliseconds: 200),
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.purple],
    ),
    borderRadius: BorderRadius.circular(12),
  ),
  textStyle: TextStyle(color: Colors.white, fontSize: 16),
)

Additional Information

  • The tooltip can be dismissed by tapping outside of it.
  • On desktop/web, the tooltip appears after hovering for a specified duration.
  • On mobile, tapping the child widget shows the tooltip.
  • Tapping the child while the tooltip is visible will pin it in place.
  • The tooltip automatically adjusts its position to stay within screen bounds.

For more detailed examples, please refer to the example folder in the package repository.

Customization Options

Parameter Type Description
child Widget The widget that triggers the tooltip
tooltip Widget The content of the tooltip
tooltipWidth double? Width of the tooltip
tooltipHeight double? Height of the tooltip
backgroundColor Color Background color of the tooltip
borderRadius double Border radius of the tooltip
padding EdgeInsetsGeometry Internal padding of the tooltip
elevation double Elevation (shadow) of the tooltip
hoverShowDelay Duration Delay before showing tooltip on hover
showDuration Duration Duration of the show animation
hideDuration Duration Duration of the hide animation
decoration BoxDecoration? Custom decoration for the tooltip
textStyle TextStyle? Text style for the tooltip content

Contributions

Contributions to the Custom Tooltip package are welcome! Please feel free to submit issues and pull requests on our GitHub repository.

License

This project is licensed under the MIT License - see the LICENSE file for details.

About

A highly customizable tooltip widget for Flutter applications, offering rich functionality for both desktop and mobile platforms.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages