widget_tooltip 1.2.1

Widget Tooltip is a Flutter package that provides a tooltip widget that can be used to display a tooltip on any widget

English | 한국어

Widget Tooltip

A highly customizable tooltip widget for Flutter applications with smart positioning, multiple trigger modes, and rich styling options.

Features

Trigger Modes

Supports multiple ways to show tooltips:

Mode	Description
tap	Show on tap
longPress	Show on long press
doubleTap	Show on double tap
hover	Show on mouse hover (Desktop/Web)
manual	Control programmatically

Smart Positioning

Tooltip automatically positions based on screen location:

• Target in top half → tooltip appears below
• Target in bottom half → tooltip appears above

Use autoFlip: false with direction to fix position.

Directions

Control tooltip placement with direction and axis:

Dismiss Modes

Mode	Description
tapAnywhere	Dismiss by tapping anywhere (default)
tapOutside	Dismiss only when tapping outside tooltip
tapInside	Dismiss only when tapping the tooltip
manual	Dismiss only via controller

Custom Styling

Full control over appearance with messageDecoration, triangleColor, messagePadding, and more.

Installation

dependencies:
  widget_tooltip: ^1.2.0

flutter pub add widget_tooltip

Quick Start

Basic Usage

import 'package:widget_tooltip/widget_tooltip.dart';

WidgetTooltip(
  message: Text('Hello!'),
  child: Icon(Icons.info),
)

Trigger Modes

// Tap to show
WidgetTooltip(
  message: Text('Tap triggered'),
  triggerMode: WidgetTooltipTriggerMode.tap,
  child: Icon(Icons.touch_app),
)

// Hover (Desktop/Web)
WidgetTooltip(
  message: Text('Hover triggered'),
  triggerMode: WidgetTooltipTriggerMode.hover,
  child: Icon(Icons.mouse),
)

Manual Control

final controller = TooltipController();

WidgetTooltip(
  message: Text('Controlled tooltip'),
  controller: controller,
  triggerMode: WidgetTooltipTriggerMode.manual,
  dismissMode: WidgetTooltipDismissMode.manual,
  child: Icon(Icons.info),
)

// Show/hide programmatically
controller.show();
controller.dismiss();
controller.toggle();

Fixed Direction

// Always show above target
WidgetTooltip(
  message: Text('Always on top'),
  direction: WidgetTooltipDirection.top,
  autoFlip: false,  // Disable auto positioning
  child: Icon(Icons.arrow_upward),
)

// Horizontal tooltip
WidgetTooltip(
  message: Text('On the right'),
  direction: WidgetTooltipDirection.right,
  axis: Axis.horizontal,
  autoFlip: false,
  child: Icon(Icons.arrow_forward),
)

Custom Styling

WidgetTooltip(
  message: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.check, color: Colors.white),
      SizedBox(width: 8),
      Text('Success!'),
    ],
  ),
  triggerMode: WidgetTooltipTriggerMode.tap,
  messageDecoration: BoxDecoration(
    color: Colors.green,
    borderRadius: BorderRadius.circular(8),
    boxShadow: [
      BoxShadow(
        color: Colors.green.withOpacity(0.3),
        blurRadius: 8,
        offset: Offset(0, 2),
      ),
    ],
  ),
  triangleColor: Colors.green,
  messagePadding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
  child: Icon(Icons.info),
)

Auto Dismiss

WidgetTooltip(
  message: Text('Disappears in 2 seconds'),
  triggerMode: WidgetTooltipTriggerMode.tap,
  autoDismissDuration: Duration(seconds: 2),
  child: Icon(Icons.timer),
)

Animations

WidgetTooltip(
  message: Text('Scale animation'),
  animation: WidgetTooltipAnimation.scale,
  animationDuration: Duration(milliseconds: 200),
  child: Icon(Icons.animation),
)

Available animations: fade (default), scale, scaleAndFade, none

API Reference

WidgetTooltip

Property	Type	Default	Description
message	Widget	required	Content displayed in tooltip
child	Widget	required	Target widget that triggers tooltip
triggerMode	WidgetTooltipTriggerMode?	longPress	How to trigger the tooltip
dismissMode	WidgetTooltipDismissMode?	tapAnywhere	How to dismiss the tooltip
direction	WidgetTooltipDirection?	auto	Tooltip direction (top/bottom/left/right)
axis	Axis	vertical	Tooltip axis
autoFlip	bool	true	Auto position based on screen center
controller	TooltipController?	null	Controller for manual control
animation	WidgetTooltipAnimation	fade	Animation type
animationDuration	Duration	300ms	Animation duration
autoDismissDuration	Duration?	null	Auto dismiss after duration
messageDecoration	BoxDecoration	black rounded	Tooltip box decoration
messagePadding	EdgeInsetsGeometry	8x16	Padding inside tooltip
triangleColor	Color	black	Triangle indicator color
triangleSize	Size	10x10	Triangle indicator size
triangleRadius	double	2	Triangle corner radius
targetPadding	double	4	Gap between target and tooltip
padding	EdgeInsetsGeometry	16	Screen edge padding
onShow	VoidCallback?	null	Called when tooltip shows
onDismiss	VoidCallback?	null	Called when tooltip hides

TooltipController

Method	Description
show()	Show the tooltip
dismiss()	Hide the tooltip
toggle()	Toggle visibility
isShow	Current visibility state

Platform Support

Platform	Support
Android	✅
iOS	✅
Web	✅
macOS	✅
Windows	✅
Linux	✅

Requirements

• Flutter SDK: >=3.0.0
• Dart SDK: >=3.2.5

License

MIT License - see LICENSE for details.