Overlay

Tooltip

A tooltip displays information related to a widget when focused, hovered over, or long pressed.

CLI

To generate a specific style for customization:

dart run forui style create tooltip

Usage

FTooltip(...)

1FTooltip(
2 style: const .delta(
3 padding: .value(.symmetric(horizontal: 14, vertical: 10)),
4 ),
5 tipBuilder: (context, controller) => const Text('Tooltip content'),
6 builder: (context, controller, child) => child!,
7 child: const Text('Hover me'),
8)

Examples

Group

Wrap multiple tooltips in an FTooltipGroup so that subsequent tooltips appear instantly after the first one is shown.

Horizontal Alignment

You can change how the tooltip is aligned to the button.

Long Press Only

On this page