Tooltip

A small floating hint that appears next to its trigger on hover, focus, or long-press.

Wrap any widget in a FossTooltip to attach a text hint. It shows on hover, keyboard focus, or long-press, and dismisses on exit, blur, Escape, or after hideDelay. The hint is text only and never intercepts pointer input; it opens on the side you pick and flips to the opposite side when it would run off screen.

import 'package:fossui/fossui.dart';

FossTooltip(
  message: 'Copy link',
  child: FossButton(
    onPressed: copy,
    child: const Icon(LucideIcons.copy),
  ),
);

Side

side sets the preferred edge to open on. The default is top. If the popup will not fit there, it flips to the opposite side.

FossTooltip(
  message: 'Delete',
  side: FossTooltipSide.bottom,
  child: FossButton(
    onPressed: remove,
    child: const Icon(LucideIcons.trash),
  ),
);

Delays

showDelay sets how long the trigger must stay active before the popup appears (500ms by default). hideDelay sets the wait before it dismisses once the trigger ends (zero by default).

FossTooltip(
  message: 'Saved to your library',
  showDelay: const Duration(milliseconds: 200),
  hideDelay: const Duration(milliseconds: 100),
  child: const Icon(LucideIcons.bookmark),
);

Accessible label

The hint is announced through the trigger's tooltip semantics. Pass semanticsLabel when the spoken text should differ from the visible message.

FossTooltip(
  message: 'Copy',
  semanticsLabel: 'Copy link to clipboard',
  child: const Icon(LucideIcons.copy),
);

One-off styling

Global retheming comes first, but a single tooltip can override the resolved look with a FossTooltipStyle. Every field is optional and falls back to the theme.

FossTooltip(
  message: 'Copy link',
  style: const FossTooltipStyle(borderRadius: 12),
  child: const Icon(LucideIcons.copy),
);

API

FossTooltip

Prop	Type	Default	Description
`message`	`String`	required	The hint text shown in the popup.
`child`	`Widget`	required	The trigger, rendered as-is.
`side`	`FossTooltipSide`	`top`	The preferred side to open on.
`showDelay`	`Duration`	`500ms`	Delay before the popup appears after the trigger activates.
`hideDelay`	`Duration`	`Duration.zero`	Delay before the popup dismisses after the trigger ends.
`semanticsLabel`	`String?`	`null`	Overrides the announced text when it should differ from `message`.
`style`	`FossTooltipStyle?`	`null`	Per-instance overrides on the theme.

FossTooltipStyle

Prop	Type	Default	Description
`backgroundColor`	`Color?`	`null`	Fill of the popup surface.
`borderColor`	`Color?`	`null`	Color of the 1px popup border.
`foregroundColor`	`Color?`	`null`	Color of the message text.
`borderRadius`	`double?`	`null`	Corner radius of the popup surface.
`shadows`	`List<BoxShadow>?`	`null`	Drop shadow of the popup surface.
`textStyle`	`TextStyle?`	`null`	Style of the message text, merged over the token default.

FossTooltipSide

top, bottom, left, right. The left and right sides mirror under RTL.

Live demo

Open the interactive gallery to try every variant, size, and state with live knobs.

On this page