A contextual overlay component for displaying helpful information when hovering.
Interactive preview
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
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: .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'),
),
],
);
}
RemixTooltipStyler get styleDefault {
return RemixTooltipStyler()
.padding(.symmetric(horizontal: 12, vertical: 8))
.backgroundColor(Colors.black87)
.borderRadius(.circular(6))
.wrap(.defaultTextStyle(style: .color(Colors.white).fontSize(14)));
}
RemixTooltipStyler get styleFast {
return styleDefault
.waitDuration(100.ms)
.showDuration(800.ms) // touch wait
.dismissDuration(100.ms); // hover exit
}
RemixTooltipStyler get styleSlow {
return styleDefault.waitDuration(1.s).showDuration(3.s);
}
}
class _TriggerButton extends StatelessWidget {
const _TriggerButton({required this.label});
final String label;
@override
Widget build(BuildContext context) {
return Container(
padding: const .symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(color: Colors.blue, borderRadius: .circular(8)),
child: Text(label, style: const .new(color: Colors.white)),
);
}
}Fortal widgets
Remix includes a generated Fortal-themed widget for this component:
import 'package:flutter/material.dart';
import 'package:remix/remix.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 fortalTooltipStyler source code for all available options.
Constructor
const RemixTooltip({
Key? key,
required Widget tooltipChild,
required Widget child,
String? tooltipSemantics,
OverlayPositionConfig positioning = const OverlayPositionConfig(),
RemixTooltipStyler style = const RemixTooltipStyler.create(),
RemixTooltipSpec? styleSpec,
})Properties
Widget Properties
key → Key?
Optional. Controls how one widget replaces another widget in the tree.
style → RemixTooltipStyler
Optional. The style configuration for the tooltip.
styleSpec → RemixTooltipSpec?
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.
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
backgroundColor(Color value)
Sets tooltip 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<RemixTooltipSpec>> 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, {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, String? tooltipSemantics, OverlayPositionConfig positioning = const OverlayPositionConfig()})
Creates a RemixTooltip widget with this style applied.