Skip to Content
Forui 0.17.0 is released 🎉
DocumentationOverlayTooltip

Tooltip

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

API Reference

CLI

To generate and customize this style:

dart run forui style create tooltip

Usage

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.

Long Press Only

Last updated on
Popover MenuToast