Overlay

Tooltip

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

API Reference
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 variants: {.outline},
17 mainAxisSize: .min,
18 onPress: () {},
19 child: const Text('Long press/Hover'),
20 ),
21 ),
22 ],
23 ),
24 ),
25 ),
26 ),
27 ),
28);
29

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

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 variants: {.outline},
19 mainAxisSize: .min,
20 onPress: () {},
21 child: const Text('Long press/Hover'),
22 ),
23 ),
24 ],
25 ),
26 ),
27 ),
28 ),
29 ),
30);
31

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 variants: {.outline},
18 mainAxisSize: .min,
19 onPress: () {},
20 child: const Text('Long press'),
21 ),
22 ),
23 ],
24 ),
25 ),
26 ),
27 ),
28 ),
29);
30

Toast

An opinionated toast that temporarily displays a succinct message.

Collapsible

A collapsible widget that animates between visible and hidden states.

On this page

CLI
Usage
FTooltip(...)
Examples
Horizontal Alignment
Long Press Only