Tooltip
A contextual overlay component for displaying helpful information on hover
A contextual overlay component for displaying helpful information when hovering.
When to use this
- Additional information: Provide extra context or details on hover
- Icon explanations: Explain the purpose of icons or buttons
- Truncated text: Show full text when space is limited
- Help text: Offer guidance or tips to users
Basic implementation
Basic implementation
import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
class TooltipExample extends StatelessWidget {
const TooltipExample({super.key});
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
spacing: 24,
children: [
RemixTooltip(
tooltipChild: const Text('Default tooltip'),
style: styleDefault,
child: const _TriggerButton(label: 'Default'),
),
RemixTooltip(
tooltipChild: const Text('Quick tooltip!'),
style: styleFast,
child: const _TriggerButton(label: 'Fast'),
),
RemixTooltip(
tooltipChild: const Text('Slow tooltip'),
style: styleSlow,
child: const _TriggerButton(label: 'Slow'),
),
],
);
}
TooltipStyler get styleDefault {
return TooltipStyler()
.padding(EdgeInsetsGeometryMix.symmetric(horizontal: 12, vertical: 8))
.color(Colors.black87)
.borderRadius(BorderRadiusGeometryMix.all(const Radius.circular(6)))
.wrap(.defaultTextStyle(style: TextStyleMix().color(Colors.white).fontSize(14)));
}
TooltipStyler get styleFast {
return styleDefault
.waitDuration(const Duration(milliseconds: 100))
.showDuration(const Duration(milliseconds: 800)) // touch wait
.dismissDuration(const Duration(milliseconds: 100)); // hover exit
}
TooltipStyler get styleSlow {
return styleDefault
.waitDuration(const Duration(seconds: 1))
.showDuration(const Duration(seconds: 3));
}
}
class _TriggerButton extends StatelessWidget {
const _TriggerButton({required this.label});
final String label;
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(8),
),
child: Text(label, style: const TextStyle(color: Colors.white)),
);
}
}Controlled visibility
RemixTooltip and FortalTooltip accept open and onOpenChanged.
Leave open null for automatic hover, keyboard-focus, and touch behavior.
When open is a boolean, interaction requests a change through
onOpenChanged; the owner must update open to accept it. Changing visibility
keeps the trigger mounted and preserves its focus.
A controlled, closed tooltip delegates unmodified Escape to an enabled enclosing
DismissIntent action, allowing a containing drawer or menu to dismiss.
An open tooltip handles Escape by requesting closure.
Fortal widgets
The application-owned Fortal preset provides a themed widget for this component:
Fortal widget
import 'package:flutter/material.dart';
import 'ui/ui.dart';
class FortalTooltipExample extends StatelessWidget {
const FortalTooltipExample({super.key});
@override
Widget build(BuildContext context) {
return Row(
spacing: 16,
children: [
FortalTooltip(
tooltipChild: const Text('Information tooltip'),
child: const Icon(Icons.info),
),
FortalTooltip(
tooltipChild: const Text('Help tooltip'),
child: const Icon(Icons.help),
),
],
);
}
}See the fortalTooltipStyle source code for all available options.
Constructor
Constructor
import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
RemixTooltip remixTooltipConstructor({
Key? key,
required Widget tooltipChild,
required Widget child,
bool? open,
ValueChanged<bool>? onOpenChanged,
String? tooltipSemantics,
OverlayPositionConfig positioning = const OverlayPositionConfig(),
TooltipStyler style = const TooltipStyler.create(),
TooltipSpec? styleSpec,
}) => throw UnimplementedError();Properties
Widget Properties
key → Key?
Optional. Controls how one widget replaces another widget in the tree.
style → TooltipStyler
Optional. The style configuration for the tooltip.
styleSpec → TooltipSpec?
Optional. The style spec for the tooltip.
tooltipChild → Widget
Required. The widget to display in the tooltip.
child → Widget
Required. The child widget that will trigger the tooltip.
open → bool?
Optional. Controlled visibility, or null for hover/focus/touch-managed visibility.
onOpenChanged → ValueChanged<bool>?
Optional. Requests a visibility change; controlled callers must accept it in open.
tooltipSemantics → String?
Optional. The semantic label for the tooltip.
positioning → OverlayPositionConfig
Optional. Overlay positioning configuration.
Style Methods
container(BoxStyler value)
Sets the tooltip container style.
label(TextStyler value)
Sets the tooltip label style.
padding(EdgeInsetsGeometryMix value)
Sets container padding
margin(EdgeInsetsGeometryMix value)
Sets container margin
alignment(Alignment value)
Sets container alignment
color(Color value)
Sets container background color
borderRadius(BorderRadiusGeometryMix radius)
Sets container border radius
decoration(DecorationMix value)
Sets container decoration
waitDuration(Duration value)
Sets the wait duration before showing tooltip
showDuration(Duration value)
Maps to touch long-press wait (NakedTooltip.touchDelay), not hover dismiss.
dismissDuration(Duration value)
Maps to hover-exit dismiss grace (NakedTooltip.dismissDelay).
wrap(WidgetModifierConfig value)
Applies widget modifiers such as clipping, opacity, or scaling.
animate(AnimationConfig value)
Configures implicit animation for style transitions.
variants(List<VariantStyle<TooltipSpec>> value)
Sets style variants.
constraints(BoxConstraintsMix value)
Sets size constraints on the component.
foregroundDecoration(DecorationMix value)
Sets a foreground decoration painted on top of the component.
transform(Matrix4 value, AlignmentGeometry alignment = Alignment.center)
Applies a matrix transformation to the component.
modifier(WidgetModifierConfig value)
Sets the widget modifier.
call({Key? key, required Widget tooltipChild, required Widget child, bool? open, ValueChanged<bool>? onOpenChanged, String? tooltipSemantics, OverlayPositionConfig positioning = const OverlayPositionConfig()})
Creates a RemixTooltip widget with this style applied.