Tooltip class

A Material Design tooltip.

Tooltips provide text labels which help explain the function of a button or other user interface action. Wrap the button in a Tooltip widget and provide a message which will be shown when the widget is long pressed.

Many widgets, such as IconButton, FloatingActionButton, and PopupMenuButton have a tooltip property that, when non-null, causes the widget to include a Tooltip in its build.

Tooltips improve the accessibility of visual widgets by proving a textual representation of the widget, which, for example, can be vocalized by a screen reader.

This example show a basic Tooltip which has a Text as child. message contains your label to be shown by the tooltip when the child that Tooltip wraps is hovered over on web or desktop. On mobile, the tooltip is shown when the widget is long pressed.

This tooltip will default to showing above the Text instead of below because its ambient TooltipThemeData.preferBelow is false. (See the use of MaterialApp.theme.) Setting that piece of theme data is recommended to avoid having a finger or cursor hide the tooltip. For other ways to set that piece of theme data see:

or it can be set directly on each tooltip with Tooltip.preferBelow.


To create a local project with this code sample, run:
flutter create --sample=material.Tooltip.1 mysample

This example covers most of the attributes available in Tooltip. decoration has been used to give a gradient and borderRadius to Tooltip. height has been used to set a specific height of the Tooltip. preferBelow is true; the tooltip will prefer showing below Tooltip's child widget. However, it may show the tooltip above if there's not enough space below the widget. textStyle has been used to set the font size of the 'message'. showDuration accepts a Duration to continue showing the message after the long press has been released or the mouse pointer exits the child widget. waitDuration accepts a Duration for which a mouse pointer has to hover over the child widget before the tooltip is shown.

To create a local project with this code sample, run:
flutter create --sample=material.Tooltip.2 mysample

This example shows a rich Tooltip that specifies the richMessage parameter instead of the message parameter (only one of these may be non-null. Any InlineSpan can be specified for the richMessage attribute, including WidgetSpan.

To create a local project with this code sample, run:
flutter create --sample=material.Tooltip.3 mysample

This example shows how Tooltip can be shown manually with TooltipTriggerMode.manual by calling the TooltipState.ensureTooltipVisible function.

To create a local project with this code sample, run:
flutter create --sample=material.Tooltip.4 mysample

See also:



Tooltip({Key? key, String? message, InlineSpan? richMessage, double? height, EdgeInsetsGeometry? padding, EdgeInsetsGeometry? margin, double? verticalOffset, bool? preferBelow, bool? excludeFromSemantics, Decoration? decoration, TextStyle? textStyle, TextAlign? textAlign, Duration? waitDuration, Duration? showDuration, Duration? exitDuration, bool enableTapToDismiss = true, TooltipTriggerMode? triggerMode, bool? enableFeedback, TooltipTriggeredCallback? onTriggered, Widget? child})
Creates a tooltip.


child Widget?
The widget below this widget in the tree.
decoration Decoration?
Specifies the tooltip's shape and background color.
enableFeedback bool?
Whether the tooltip should provide acoustic and/or haptic feedback.
enableTapToDismiss bool
Whether the tooltip can be dismissed by tap.
excludeFromSemantics bool?
Whether the tooltip's message or richMessage should be excluded from the semantics tree.
exitDuration Duration?
The length of time that a pointer must have stopped hovering over a tooltip's widget before the tooltip will be hidden.
hashCode int
The hash code for this object.
no setterinherited
height double?
The height of the tooltip's child.
key Key?
Controls how one widget replaces another widget in the tree.
margin EdgeInsetsGeometry?
The empty space that surrounds the tooltip.
message String?
The text to display in the tooltip.
onTriggered TooltipTriggeredCallback?
Called when the Tooltip is triggered.
padding EdgeInsetsGeometry?
The amount of space by which to inset the tooltip's child.
preferBelow bool?
Whether the tooltip defaults to being displayed below the widget.
richMessage InlineSpan?
The rich text to display in the tooltip.
runtimeType Type
A representation of the runtime type of the object.
no setterinherited
showDuration Duration?
The length of time that the tooltip will be shown after a long press is released (if triggerMode is TooltipTriggerMode.longPress) or a tap is released (if triggerMode is TooltipTriggerMode.tap). This property does not affect mouse pointer devices.
textAlign TextAlign?
How the message of the tooltip is aligned horizontally.
textStyle TextStyle?
The style to use for the message of the tooltip.
triggerMode TooltipTriggerMode?
The TooltipTriggerMode that will show the tooltip.
verticalOffset double?
The vertical gap between the widget and the displayed tooltip.
waitDuration Duration?
The length of time that a pointer must hover over a tooltip's widget before the tooltip will be shown.


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


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

Static Methods

dismissAllToolTips() bool
Dismiss all of the tooltips that are currently shown on the screen, including those with mouse cursors currently hovering over them.