just_tooltip #

A custom Flutter tooltip widget. Combine direction (top/bottom/left/right) and alignment (start/center/end) to position tooltips exactly where you want.

Install #

dependencies:
  just_tooltip:
    git:
      url: https://github.com/kihyun1998/just_tooltip.git

Basic Usage #

Pass a message string. Defaults to hover trigger, top-center position.

JustTooltip(
  message: 'Hello!',
  child: Text('Hover me'),
)

Direction & Alignment #

direction controls which side the tooltip appears on. alignment controls where it aligns along that side.

JustTooltip(
  message: 'Top left aligned',
  direction: TooltipDirection.top,
  alignment: TooltipAlignment.start,
  child: MyWidget(),
)

12 combinations are available:

In RTL environments, start/end are automatically swapped.

Trigger #

Hover and tap triggers can be toggled independently.

// Tap only
JustTooltip(
  message: 'Tap tooltip',
  enableTap: true,
  enableHover: false,
  child: MyButton(),
)

Controller #

Use JustTooltipController for programmatic control.

final controller = JustTooltipController();

// Widget
JustTooltip(
  message: 'Controlled',
  controller: controller,
  enableHover: false,
  child: MyWidget(),
)

// Control
controller.show();
controller.hide();
controller.toggle();

Custom Content #

Use tooltipBuilder to render any widget instead of plain text.

JustTooltip(
  tooltipBuilder: (context) => Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.info, color: Colors.white, size: 16),
      SizedBox(width: 8),
      Text('Custom content', style: TextStyle(color: Colors.white)),
    ],
  ),
  child: MyWidget(),
)

Styling #

JustTooltip(
  message: 'Styled',
  backgroundColor: Colors.indigo,
  borderRadius: BorderRadius.circular(12),
  padding: EdgeInsets.all(16),
  elevation: 8.0,
  offset: 12.0,  // gap between child and tooltip
  textStyle: TextStyle(color: Colors.white, fontSize: 16),
  child: MyWidget(),
)

Callbacks #

JustTooltip(
  message: 'With callbacks',
  onShow: () => print('shown'),
  onHide: () => print('hidden'),
  child: MyWidget(),
)

API Reference #

Example #

An interactive playground app is included in the example/ folder.

cd example
flutter run