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: ^0.1.7

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(),
)

Cross-Axis Offset #

Use crossAxisOffset to shift the tooltip along the cross-axis from the aligned edge. For start/end, a positive value pushes the tooltip inward (toward center). For center, a positive value moves toward the end direction.

JustTooltip(
  message: 'Shifted inward',
  direction: TooltipDirection.top,
  alignment: TooltipAlignment.start,
  crossAxisOffset: 10, // left-aligned but shifted 10px to the right
  child: MyWidget(),
)

Interactive & Timing #

interactive keeps the tooltip visible when the cursor moves from the child to the tooltip itself. Useful for selectable text or clickable content inside the tooltip.

waitDuration adds a delay before the tooltip appears. showDuration auto-hides the tooltip after a set time.

JustTooltip(
  message: 'Interactive tooltip',
  interactive: true,           // stay visible when hovering tooltip (default: true)
  waitDuration: Duration(milliseconds: 300),  // delay before showing
  showDuration: Duration(seconds: 3),         // auto-hide after 3s
  child: MyWidget(),
)

Box Shadow #

Use boxShadow for fine-grained shadow control. When provided, elevation is ignored.

JustTooltip(
  message: 'Custom shadow',
  boxShadow: [
    BoxShadow(
      color: Colors.black.withValues(alpha: 0.3),
      blurRadius: 8.0,
      spreadRadius: 1.0,
      offset: Offset(0, 4),
    ),
  ],
  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
  crossAxisOffset: 10.0,  // shift along the cross-axis
  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