Tooltip

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)),
    );
  }
}

Interactive preview

Resolving preview metadata...

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.

Constructor


const RemixTooltip({
  Key? key,
  required Widget child,
  required Widget tooltipChild,
  String? tooltipSemantics,
  RemixTooltipStyle style = const RemixTooltipStyle.create(),
  RemixTooltipSpec? styleSpec,
})

Properties

Prop	Type	Required / Default Value
`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

Method	Description
`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.