Tooltip

1@override
2Widget build(BuildContext context) => FTheme(
3  data: theme,
4  child: FScaffold(
5    child: Center(
6      child: ConstrainedBox(
7        constraints: const BoxConstraints(maxWidth: 200, maxHeight: 200),
8        child: Builder(
9          builder: (context) => Column(
10            mainAxisAlignment: .center,
11            children: [
12              const SizedBox(height: 30),
13              FTooltip(
14                tipBuilder: (context, _) => const Text('Add to library'),
15                child: FButton(
16                  variant: .outline,
17                  size: .sm,
18                  mainAxisSize: .min,
19                  onPress: () {},
20                  child: const Text('Long press/Hover'),
21                ),
22              ),
23            ],
24          ),
25        ),
26      ),
27    ),
28  ),
29);
30

CLI

To generate and customize this style:

dart run forui style create tooltip

Usage

`FTooltip(...)`

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

Examples

Group

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

1@override
2Widget build(BuildContext context) =>
3    FTooltipGroup(
4      child: Row(
5        mainAxisSize: .min,
6        spacing: 2,
7        children: [
8          FTooltip(
9            tipBuilder: (context, _) => const Text('Bold'),
10            child: FButton.icon(
11              variant: .ghost,
12              size: .sm,
13              onPress: () {},
14              child: const Icon(FIcons.bold),
15            ),
16          ),
17          FTooltip(
18            tipBuilder: (context, _) => const Text('Italic'),
19            child: FButton.icon(
20              variant: .ghost,
21              size: .sm,
22              onPress: () {},
23              child: const Icon(FIcons.italic),
24            ),
25          ),
26          FTooltip(
27            tipBuilder: (context, _) => const Text('Underline'),
28            child: FButton.icon(
29              variant: .ghost,
30              size: .sm,
31              onPress: () {},
32              child: const Icon(FIcons.underline),
33            ),
34          ),
35          FTooltip(
36            tipBuilder: (context, _) => const Text('Strikethrough'),
37            child: FButton.icon(
38              variant: .ghost,
39              size: .sm,
40              onPress: () {},
41              child: const Icon(FIcons.strikethrough),
42            ),
43          ),
44        ],
45      ),
46    );
47

Horizontal Alignment

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

1@override
2Widget build(BuildContext context) => FTheme(
3  data: theme,
4  child: FScaffold(
5    child: Center(
6      child: ConstrainedBox(
7        constraints: const BoxConstraints(maxWidth: 200, maxHeight: 200),
8        child: Builder(
9          builder: (context) => Column(
10            mainAxisAlignment: .center,
11            children: [
12              const SizedBox(height: 30),
13              FTooltip(
14                tipAnchor: .topLeft,
15                childAnchor: .topRight,
16                tipBuilder: (context, _) => const Text('Add to library'),
17                child: FButton(
18                  variant: .outline,
19                  size: .sm,
20                  mainAxisSize: .min,
21                  onPress: () {},
22                  child: const Text('Long press/Hover'),
23                ),
24              ),
25            ],
26          ),
27        ),
28      ),
29    ),
30  ),
31);
32

Long Press Only

1@override
2Widget build(BuildContext context) => FTheme(
3  data: theme,
4  child: FScaffold(
5    child: Center(
6      child: ConstrainedBox(
7        constraints: const BoxConstraints(maxWidth: 200, maxHeight: 200),
8        child: Builder(
9          builder: (context) => Column(
10            mainAxisAlignment: .center,
11            children: [
12              const SizedBox(height: 30),
13              FTooltip(
14                hover: false,
15                tipBuilder: (context, _) => const Text('Add to library'),
16                child: FButton(
17                  variant: .outline,
18                  size: .sm,
19                  mainAxisSize: .min,
20                  onPress: () {},
21                  child: const Text('Long press'),
22                ),
23              ),
24            ],
25          ),
26        ),
27      ),
28    ),
29  ),
30);
31

CLI