Unverified Commit e7f99821 authored by Chris Bobbe's avatar Chris Bobbe Committed by GitHub

Tooltip docs: Recommend setting preferBelow to false in theme (#135879)

As discussed at https://github.com/flutter/flutter/pull/133007#issuecomment-1743916183, this is a docs change meant to help people in the absence of a fix for #133006, which is being closed as WONTFIX.
parent c51022bc
...@@ -14,6 +14,7 @@ class TooltipExampleApp extends StatelessWidget { ...@@ -14,6 +14,7 @@ class TooltipExampleApp extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return MaterialApp(
theme: ThemeData(tooltipTheme: const TooltipThemeData(preferBelow: false)),
home: Scaffold( home: Scaffold(
appBar: AppBar(title: const Text('Tooltip Sample')), appBar: AppBar(title: const Text('Tooltip Sample')),
body: const Center( body: const Center(
......
...@@ -14,6 +14,7 @@ class TooltipExampleApp extends StatelessWidget { ...@@ -14,6 +14,7 @@ class TooltipExampleApp extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return MaterialApp(
theme: ThemeData(tooltipTheme: const TooltipThemeData(preferBelow: false)),
home: Scaffold( home: Scaffold(
appBar: AppBar(title: const Text('Tooltip Sample')), appBar: AppBar(title: const Text('Tooltip Sample')),
body: const Center( body: const Center(
...@@ -37,7 +38,7 @@ class TooltipSample extends StatelessWidget { ...@@ -37,7 +38,7 @@ class TooltipSample extends StatelessWidget {
), ),
height: 50, height: 50,
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
preferBelow: false, preferBelow: true,
textStyle: const TextStyle( textStyle: const TextStyle(
fontSize: 24, fontSize: 24,
), ),
......
...@@ -14,6 +14,7 @@ class TooltipExampleApp extends StatelessWidget { ...@@ -14,6 +14,7 @@ class TooltipExampleApp extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return MaterialApp(
theme: ThemeData(tooltipTheme: const TooltipThemeData(preferBelow: false)),
home: Scaffold( home: Scaffold(
appBar: AppBar(title: const Text('Tooltip Sample')), appBar: AppBar(title: const Text('Tooltip Sample')),
body: const Center( body: const Center(
......
...@@ -13,8 +13,9 @@ class TooltipExampleApp extends StatelessWidget { ...@@ -13,8 +13,9 @@ class TooltipExampleApp extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return const MaterialApp( return MaterialApp(
home: TooltipSample(title: 'Tooltip Sample'), theme: ThemeData(tooltipTheme: const TooltipThemeData(preferBelow: false)),
home: const TooltipSample(title: 'Tooltip Sample'),
); );
} }
} }
......
...@@ -106,6 +106,17 @@ class _RenderExclusiveMouseRegion extends RenderMouseRegion { ...@@ -106,6 +106,17 @@ class _RenderExclusiveMouseRegion extends RenderMouseRegion {
/// the child that Tooltip wraps is hovered over on web or desktop. On mobile, /// the child that Tooltip wraps is hovered over on web or desktop. On mobile,
/// the tooltip is shown when the widget is long pressed. /// 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:
///
/// * [Theme.data], [ThemeData.tooltipTheme]
/// * [TooltipTheme.data]
///
/// or it can be set directly on each tooltip with [Tooltip.preferBelow].
///
/// ** See code in examples/api/lib/material/tooltip/tooltip.0.dart ** /// ** See code in examples/api/lib/material/tooltip/tooltip.0.dart **
/// {@end-tool} /// {@end-tool}
/// ///
...@@ -113,9 +124,9 @@ class _RenderExclusiveMouseRegion extends RenderMouseRegion { ...@@ -113,9 +124,9 @@ class _RenderExclusiveMouseRegion extends RenderMouseRegion {
/// This example covers most of the attributes available in Tooltip. /// This example covers most of the attributes available in Tooltip.
/// `decoration` has been used to give a gradient and borderRadius to 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. /// `height` has been used to set a specific height of the Tooltip.
/// `preferBelow` is false, the tooltip will prefer showing above [Tooltip]'s child widget. /// `preferBelow` is true; the tooltip will prefer showing below [Tooltip]'s child widget.
/// However, it may show the tooltip below if there's not enough space /// However, it may show the tooltip above if there's not enough space
/// above the widget. /// below the widget.
/// `textStyle` has been used to set the font size of the 'message'. /// `textStyle` has been used to set the font size of the 'message'.
/// `showDuration` accepts a Duration to continue showing the message after the long /// `showDuration` accepts a Duration to continue showing the message after the long
/// press has been released or the mouse pointer exits the child widget. /// press has been released or the mouse pointer exits the child widget.
...@@ -231,9 +242,15 @@ class Tooltip extends StatefulWidget { ...@@ -231,9 +242,15 @@ class Tooltip extends StatefulWidget {
/// Whether the tooltip defaults to being displayed below the widget. /// Whether the tooltip defaults to being displayed below the widget.
/// ///
/// Defaults to true. If there is insufficient space to display the tooltip in /// If there is insufficient space to display the tooltip in
/// the preferred direction, the tooltip will be displayed in the opposite /// the preferred direction, the tooltip will be displayed in the opposite
/// direction. /// direction.
///
/// If this property is null, then [TooltipThemeData.preferBelow] is used.
/// If that is also null, the default value is true.
///
/// Applying [TooltipThemeData.preferBelow]: `false` for the entire app
/// is recommended to avoid having a finger or cursor hide a tooltip.
final bool? preferBelow; final bool? preferBelow;
/// Whether the tooltip's [message] or [richMessage] should be excluded from /// Whether the tooltip's [message] or [richMessage] should be excluded from
......
...@@ -67,6 +67,9 @@ class TooltipThemeData with Diagnosticable { ...@@ -67,6 +67,9 @@ class TooltipThemeData with Diagnosticable {
/// ///
/// If there is insufficient space to display the tooltip in the preferred /// If there is insufficient space to display the tooltip in the preferred
/// direction, the tooltip will be displayed in the opposite direction. /// direction, the tooltip will be displayed in the opposite direction.
///
/// Applying `false` for the entire app is recommended
/// to avoid having a finger or cursor hide a tooltip.
final bool? preferBelow; final bool? preferBelow;
/// Whether the [Tooltip.message] should be excluded from the semantics /// Whether the [Tooltip.message] should be excluded from the semantics
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment