Overlay
Tooltip
A tooltip displays information related to a widget when focused, hovered over, or long pressed.
FTooltip(
hover: true,
longPress: true,
tipBuilder: (context, _) => const Text('Add to library'),
child: FButton(
style: FButtonStyle.outline(),
mainAxisSize: MainAxisSize.min,
onPress: () {},
child: const Text('Long press/Hover'),
),
);CLI
To generate and customize this style:
dart run forui style create tooltipUsage
FTooltip(...)
FTooltip(
control: FTooltipControl.managed(),
style: (style) => style.copyWith(...),
tipAnchor: Alignment.bottomCenter,
childAnchor: Alignment.topCenter,
spacing: FPortalSpacing.spacing(4),
overflow: FPortalOverflow.flip,
hover: true,
hoverEnterDuration: Duration(milliseconds: 500),
hoverExitDuration: Duration.zero,
longPress: true,
longPressExitDuration: Duration(milliseconds: 1500),
tipBuilder: (context, controller) => const Text('Tooltip'),
builder: (context, controller, child) => child!,
child: const Placeholder(),
);Examples
Horizontal Alignment
You can change how the tooltip is aligned to the button.
FTooltip(
tipAnchor: Alignment.topLeft,
childAnchor: Alignment.topRight,
tipBuilder: (context, _) => const Text('Add to library'),
child: FButton(
style: FButtonStyle.outline(),
mainAxisSize: MainAxisSize.min,
onPress: () {},
child: const Text('Long press/Hover'),
),
);Long Press Only
FTooltip(
hover: false,
longPress: true,
tipBuilder: (context, _) => const Text('Add to library'),
child: FButton(
style: FButtonStyle.outline(),
mainAxisSize: MainAxisSize.min,
onPress: () {},
child: const Text('Long press'),
),
);