Skip to content

Commit e7f9982

Browse files
authored
Tooltip docs: Recommend setting preferBelow to false in theme (#135879)
As discussed at flutter/flutter#133007 (comment), this is a docs change meant to help people in the absence of a fix for #133006, which is being closed as WONTFIX.
1 parent c51022b commit e7f9982

File tree

6 files changed

+31
-7
lines changed

6 files changed

+31
-7
lines changed

examples/api/lib/material/tooltip/tooltip.0.dart

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ class TooltipExampleApp extends StatelessWidget {
1414
@override
1515
Widget build(BuildContext context) {
1616
return MaterialApp(
17+
theme: ThemeData(tooltipTheme: const TooltipThemeData(preferBelow: false)),
1718
home: Scaffold(
1819
appBar: AppBar(title: const Text('Tooltip Sample')),
1920
body: const Center(

examples/api/lib/material/tooltip/tooltip.1.dart

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ class TooltipExampleApp extends StatelessWidget {
1414
@override
1515
Widget build(BuildContext context) {
1616
return MaterialApp(
17+
theme: ThemeData(tooltipTheme: const TooltipThemeData(preferBelow: false)),
1718
home: Scaffold(
1819
appBar: AppBar(title: const Text('Tooltip Sample')),
1920
body: const Center(
@@ -37,7 +38,7 @@ class TooltipSample extends StatelessWidget {
3738
),
3839
height: 50,
3940
padding: const EdgeInsets.all(8.0),
40-
preferBelow: false,
41+
preferBelow: true,
4142
textStyle: const TextStyle(
4243
fontSize: 24,
4344
),

examples/api/lib/material/tooltip/tooltip.2.dart

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ class TooltipExampleApp extends StatelessWidget {
1414
@override
1515
Widget build(BuildContext context) {
1616
return MaterialApp(
17+
theme: ThemeData(tooltipTheme: const TooltipThemeData(preferBelow: false)),
1718
home: Scaffold(
1819
appBar: AppBar(title: const Text('Tooltip Sample')),
1920
body: const Center(

examples/api/lib/material/tooltip/tooltip.3.dart

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@ class TooltipExampleApp extends StatelessWidget {
1313

1414
@override
1515
Widget build(BuildContext context) {
16-
return const MaterialApp(
17-
home: TooltipSample(title: 'Tooltip Sample'),
16+
return MaterialApp(
17+
theme: ThemeData(tooltipTheme: const TooltipThemeData(preferBelow: false)),
18+
home: const TooltipSample(title: 'Tooltip Sample'),
1819
);
1920
}
2021
}

packages/flutter/lib/src/material/tooltip.dart

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -106,16 +106,27 @@ class _RenderExclusiveMouseRegion extends RenderMouseRegion {
106106
/// the child that Tooltip wraps is hovered over on web or desktop. On mobile,
107107
/// the tooltip is shown when the widget is long pressed.
108108
///
109+
/// This tooltip will default to showing above the [Text] instead of below
110+
/// because its ambient [TooltipThemeData.preferBelow] is false.
111+
/// (See the use of [MaterialApp.theme].)
112+
/// Setting that piece of theme data is recommended to avoid having a finger or
113+
/// cursor hide the tooltip. For other ways to set that piece of theme data see:
114+
///
115+
/// * [Theme.data], [ThemeData.tooltipTheme]
116+
/// * [TooltipTheme.data]
117+
///
118+
/// or it can be set directly on each tooltip with [Tooltip.preferBelow].
119+
///
109120
/// ** See code in examples/api/lib/material/tooltip/tooltip.0.dart **
110121
/// {@end-tool}
111122
///
112123
/// {@tool dartpad}
113124
/// This example covers most of the attributes available in Tooltip.
114125
/// `decoration` has been used to give a gradient and borderRadius to Tooltip.
115126
/// `height` has been used to set a specific height of the Tooltip.
116-
/// `preferBelow` is false, the tooltip will prefer showing above [Tooltip]'s child widget.
117-
/// However, it may show the tooltip below if there's not enough space
118-
/// above the widget.
127+
/// `preferBelow` is true; the tooltip will prefer showing below [Tooltip]'s child widget.
128+
/// However, it may show the tooltip above if there's not enough space
129+
/// below the widget.
119130
/// `textStyle` has been used to set the font size of the 'message'.
120131
/// `showDuration` accepts a Duration to continue showing the message after the long
121132
/// press has been released or the mouse pointer exits the child widget.
@@ -231,9 +242,15 @@ class Tooltip extends StatefulWidget {
231242

232243
/// Whether the tooltip defaults to being displayed below the widget.
233244
///
234-
/// Defaults to true. If there is insufficient space to display the tooltip in
245+
/// If there is insufficient space to display the tooltip in
235246
/// the preferred direction, the tooltip will be displayed in the opposite
236247
/// direction.
248+
///
249+
/// If this property is null, then [TooltipThemeData.preferBelow] is used.
250+
/// If that is also null, the default value is true.
251+
///
252+
/// Applying [TooltipThemeData.preferBelow]: `false` for the entire app
253+
/// is recommended to avoid having a finger or cursor hide a tooltip.
237254
final bool? preferBelow;
238255

239256
/// Whether the tooltip's [message] or [richMessage] should be excluded from

packages/flutter/lib/src/material/tooltip_theme.dart

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,9 @@ class TooltipThemeData with Diagnosticable {
6767
///
6868
/// If there is insufficient space to display the tooltip in the preferred
6969
/// direction, the tooltip will be displayed in the opposite direction.
70+
///
71+
/// Applying `false` for the entire app is recommended
72+
/// to avoid having a finger or cursor hide a tooltip.
7073
final bool? preferBelow;
7174

7275
/// Whether the [Tooltip.message] should be excluded from the semantics

0 commit comments

Comments
 (0)