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
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'),
),
],
);
}
RemixTooltipStyle get styleDefault {
return RemixTooltipStyle()
.padding(EdgeInsetsGeometryMix.symmetric(horizontal: 12, vertical: 8))
.color(Colors.black87)
.borderRadius(BorderRadiusGeometryMix.all(const Radius.circular(6)))
.wrapDefaultTextStyle(TextStyleMix().color(Colors.white).fontSize(14));
}
RemixTooltipStyle get styleFast {
return styleDefault
.waitDuration(const Duration(milliseconds: 100))
.showDuration(const Duration(milliseconds: 800));
}
RemixTooltipStyle 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)),
);
}
}Fortal styles
Remix includes Fortal-themed style helpers 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: [
RemixTooltip(
tooltipChild: const Text('Information tooltip'),
style: FortalTooltipStyle.base(),
child: const Icon(Icons.info),
),
RemixTooltip(
tooltipChild: const Text('Help tooltip'),
style: FortalTooltipStyle.base(),
child: const Icon(Icons.help),
),
],
);
}
}See the FortalTooltipStyle source code for all available options.
Constructor
const RemixTooltip({
Key? key,
required Widget child,
required Widget tooltipChild,
String? tooltipSemantics,
RemixTooltipStyle style = const RemixTooltipStyle.create(),
RemixTooltipSpec? styleSpec,
})Properties
Widget Properties
key → Key?
Optional. Controls how one widget replaces another widget in the tree.
style → RemixTooltipStyle
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.
Style Methods
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)
Sets the show duration before hiding tooltip
wrap(WidgetModifierConfig value)
Applies widget modifiers such as clipping, opacity, or scaling.
animate(AnimationConfig config)
Configures implicit animation for style transitions.
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.