FluentTooltip class

A Fluent 2 tooltip.

FluentTooltip(
  content: const Text('Save the document'),
  child: FluentButton.icon(
    icon: const Icon(FluentIcons.save_20_regular),
    semanticLabel: 'Save',
    onPressed: () {},
  ),
)

Appears on pointer hover and on keyboard-visible focus. Hover is delayed 250ms each way, matching useTooltipBase's showDelay/hideDelay; focus and blur are immediate, because a tooltip trailing a quarter second behind the focus ring reads as a fault. enabled is a real state rather than a visual treatment: a disabled tooltip is never inserted into the Overlay at all, and one that is already showing when it is disabled is torn down at once, without waiting out the delay.

No motion

Upstream ships no transition for the tooltip on master, and its old slide path is explicitly deprecated, so this appears and disappears on the frame the trigger changes. That is not an omission waiting to be polished with a fade — see the note on FluentMotionSpec. It also makes the component trivially correct under reduced motion: there is no animation to shorten.

Positioning

The surface is placed by an OverlayEntry anchored with CompositedTransformFollower, so it escapes any ancestor clip or overflow and follows the trigger as it moves. FluentTheme is an InheritedTheme, and the themes between this widget and the overlay are captured on the way in, so tokens resolve against the trigger's theme rather than the app root's.

position is the preferred side, not a guarantee. Upstream's tooltip never sets pinned (useTooltipBase.tsx:91-99), so usePositioningOptions.ts runs floating-ui's flip and then shift on it (:159-168) with neither boundary nor padding overridden — the clipping ancestors inside the viewport, padding 0 (floating-ui detectOverflow.ts:56-60), whose analogue here is the Overlay:

  • Flip. flip.ts:99-103 gives a centred placement exactly one fallback, the opposite side, under fallbackStrategy: 'bestFit' (react-positioning middleware/flip.ts:27). So a side that cannot hold the surface plus its offset gives way to the opposite side when that side has more room — before/after in reading order — and otherwise stays put rather than trading one overflow for a worse one.
  • Shift. floating-ui's shift defaults to the alignment axis only (shift.ts:53-54), so the surface slides along the trigger's edge until it is inside, flush with the boundary, and never off its side. One too wide for the overlay starts at its left edge (top, for before/after), in either reading direction, as clamp does.
  • Arrow. arrow.ts:72-86 centres the arrow on the trigger, kept arrowPadding from the surface's corners, so a shifted surface still points at what it describes; after a flip the arrow is drawn for the side the surface landed on.

All of it is settled in one layout pass that sees the surface's size, so no frame shows the surface on the side it is about to leave, and nothing is scheduled while it is open.

Customisation follows the same three rungs as the rest of the package. style is merged last and wins; FluentTooltipTheme restyles a subtree; and resolveFluentTooltipState, resolveFluentTooltipStyle and buildFluentTooltip are public so any one of them can be replaced without forking this widget.

Inheritance

Constructors

FluentTooltip({Key? key, required Widget child, required Widget content, FluentTooltipAppearance appearance = FluentTooltipAppearance.normal, FluentTooltipPosition position = FluentTooltipPosition.above, bool withArrow = false, bool enabled = true, FluentTooltipStyle? style, String? semanticLabel})
Wraps child with a tooltip showing content.
const

Properties

appearance → FluentTooltipAppearance
Fill treatment.
final
child → Widget
The trigger. Hovering or keyboard-focusing it shows the tooltip.
final
content → Widget
The tooltip body. Wraps at 240 logical pixels.
final
enabled → bool
Whether the tooltip may appear at all.
final
hashCode → int
The hash code for this object.
no setterinherited
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
position → FluentTooltipPosition
Which side of child the surface prefers. It flips to the opposite side when this one lacks room inside the Overlay and that one has more.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
semanticLabel → String?
Announced by assistive technology alongside the trigger.
final
style → FluentTooltipStyle?
Overrides layered over the theme defaults. Merged last, so it wins.
final
withArrow → bool
Whether to draw the pointing arrow.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<FluentTooltip>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited