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'),
),
],
);
}
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:
Fortal base style
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.