Tooltip - FUITooltip
The FUITooltip widget provides a means to display tooltips on mouse hover for virtually any widget.
Widget Class Location
The FUITooltip widget class could be found in:
lib/focus_ui_kit/components/tooltip/fui_tooltip.dart
The FUITooltipTheme class is the theme class holds the default theme variables/values.
Accessing the theme
To access the theme class object, do the following:
@override
Widget build(BuildContext context) {
FUITooltipTheme ttTheme = context.theme.fuiTooltip;
// ...
}
Usage
Utilizing the FUITooltip feature is straightforward. Simply enclose the widget within another widget, and the tooltip will be displayed accordingly.
FUITooltip(
tooltip: Text('This is a tooltip'),
child: FUIButtonBlockTextIcon(text: Text('Press Me'), onPressed: () {}),
);
Position the tooltip
The tooltip’s position can be customized by specifying the preferredDirection parameter. This parameter accepts values from the AxisDirection enum.
/// Position tooltip - UP
FUITooltip(
preferredDirection: AxisDirection.up,
tooltip: Text('This is a tooltip'),
child: FUIButtonBlockTextIcon(text: Text('Press Me'), onPressed: () {}),
);
/// Position tooltip - DOWN
FUITooltip(
preferredDirection: AxisDirection.down,
tooltip: Text('This is a tooltip'),
child: FUIButtonBlockTextIcon(text: Text('Press Me'), onPressed: () {}),
);
/// Position tooltip - LEFT
FUITooltip(
preferredDirection: AxisDirection.left,
tooltip: Text('This is a tooltip'),
child: FUIButtonBlockTextIcon(text: Text('Press Me'), onPressed: () {}),
);
/// Position tooltip - RIGHT
FUITooltip(
preferredDirection: AxisDirection.right,
tooltip: Text('This is a tooltip'),
child: FUIButtonBlockTextIcon(text: Text('Press Me'), onPressed: () {}),
);
Other Parameters
The other parameters correspond to the just_the_tooltip package. Please refer to this package for more info.
27 March 2025