Flutter - Tooltip Widget

Tooltip is a built-in widget in flutter based on material design, which displays a textual description of the widget in a floating label when a user long-pressed and or hover over the widget. Tooltip widget becomes very useful when the UI of the application is too dense to display all the information at once on the screen, in a way it simply makes the app more accessible. There are two ways to implement the Tooltip in a widget, the first one is by using the widget itself and the other way is limited to some widgets such as IconButton, FloatingActionButton, etc which provide tooltip as a property which in turn takes in a string as a parameter. One should remember that the Tooltip widget is customizable through its properties but the tooltip property isn't. 

Constructor of Tooltip Class:

const Tooltip(
{Key? key,
required String message,
double? height,
EdgeInsetsGeometry? padding,
EdgeInsetsGeometry? margin,
double? verticalOffset,
bool? preferBelow,
bool? excludeFromSemantics,
Decoration? decoration,
TextStyle? textStyle,
Duration? waitDuration,
Duration? showDuration,
Widget? child}
)

Properties of Tooltip class:

• child: This property determines the widget for which the tooltip has to be displayed.
• decoration: With the help of decoration property background color, border (Shape), of the tooltip can be controlled.
• excludeFormSemantics: This property takes in boolean as a parameter, and by default it is false. It controls whether the tooltip's message should be added to the semantic tree or not.
• height: This property determined the height of the tooltip. It takes in double value as a parameter.
• margin: This property determines the empty space around the tooltip. It takes EdgeInsetsGeometry as the parameter.
• message: This property takes a string value as the parameter to display the text in tooltip.
• padding: This property also takes EdgeInsetsGeometry as the parameter to determine the empty space between the border and the main content of the tooltip.
• preferBelow: This property controls whether to display the tooltip on the widget or below that by taking a boolean as the parameter. By default, it is set to true.
• showDuration: This property determines the time in seconds for which the tooltip should be displayed.
• textStyle: This property takes care of the styling of the message in the tooltip such as font size or color.
• verticalOffset: This property controls the vertical distance between the tooltip and the widget.
• waitDuration: This property controls the time after which the tooltip will be made visible once the user hovers over the widget of presses it for more than one second.

Example 1: Basic tooltips.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          ) //IconButton
          ), //AppBar
      body: Center(
          child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            child: Padding(
              padding: const EdgeInsets.all(12.0),
              child: Tooltip(
                message: 'Text',
                child: Text(
                  'Flutter is an open-source UI software development kit created by Google. ',
                  style: TextStyle(
                    color: Colors.grey,
                    fontSize: 25,
                  ), //TextStyle
                ), //Text
              ), //Tooltip
            ), //Padding
            color: Colors.green[50],
            width: 300,
            height: 175,
          ), //Container
        ], //<Widget>[]
      ) //Row
     ), //Center
    ), //Scaffold
    debugShowCheckedModeBanner: false,
  )); //MaterialApp
}

Output: 

Explanation: Thus app is starting with a simple app bar created with the built-in flutter AppBar widget with a leading menu IconButton. The title of the app bar is Text widget taking a string value of 'GeeksforGeeks'. The background color assigned to the app bar is greenAccent[400]. In the IconButton tooltip property is being employed, which is also taking a string parameter.  One can notice that pressing the menu icon on the screen for more than one-second displays the tooltip with a text menu. This is one of the ways of using tooltip for the widgets, but this is all it has got, we cannot do anything else to change its looks. Another way is by using the Tooltip widget itself as we have done in the body of the app. In the body of the app, we have Center widget as the parent widget with Row as its child that aligns all its children widgets in the center. After that, we have created a Container with some padding and inside that, we have the widget Tooltip. Now, the Tooltip widget is taking Text as its child that prints a string on the screen. When we use Tooltip, the message property is a must provide, and in this case, it is 'Test'. And similar to the menu icon when the text is hovered or long pressed the tooltip pops up.

Both the tooltips in this app are bare basic built into the flutter. And we haven't done anything to change their appears, In the second example, we will see how to modify the Tooltip widget.

Example 2: Modified tooltip.

This is the code snippet for the Tooltip widget.

...
                child: Tooltip(
                message: 'Text',
                waitDuration: Duration(seconds: 1),
                showDuration: Duration(seconds: 2),
                padding: EdgeInsets.all(12),
                height: 35,
                verticalOffset: 100,
                preferBelow: true,
                textStyle: TextStyle(
                    fontSize: 15,
                    color: Colors.white,
                    fontWeight: FontWeight.normal),
                decoration: BoxDecoration(
                    borderRadius:
                        BorderRadius.only(topRight: Radius.circular(10)),
                    boxShadow: [
                      new BoxShadow(
                        color: Colors.grey,
                        blurRadius: 10.0,
                        offset: new Offset(6.0, 6.0),
                      ), //BoxShadow
                    ],
                    color: Colors.greenAccent[400]), //BoxDecoration
                child: Text(
                  'Flutter is an open-source UI software development kit created by Google. ',
                  style: TextStyle(
                    color: Colors.grey,
                    fontSize: 25,
                  ), //TextStyle
                ), //Text
              ), //Tooltip
...

Output: If the above properties are used then the output will look like this.

Explanation:  Flutter doesn't give the option to modify the tooltip property as used in the menu icon. But if we want to tweak the looks of the tooltip we can always embed it in a Tooltip widget. But flutter provided multiple properties (mentioned above) to change the look and feel of tooltips. In this app, the first change we have made after the message property is the addition of the property waitDuration which takes in Duration as its child which in turn takes the amount of time in seconds to wait before showing tooltip after a user does the appropriate action. Then we have used the showDuration property which is similar to the waitDuration, it controls for how long the tooltip will be displayed. After that, we have the padding which is taking EdgeInsets.all(12) as the parameter to provide the gap between the border of the tooltip and the child widget. A height is 35 is given to tooltip using is height property. The verticalOffset is set to 100 to display the tooltip below the Text widget. Next is the preferBelow property which controls whether to display the tooltip on the widget itself or below it. The preferedBelow property is true by default. But we can see that in the above first example the tooltip is being displayed on the text itself. The reason for this is the size of the Text widget, it's too big for tooltip it to crossover as it does in with the menu icon. So to change this behavior we have used the verticalOffset property. All this is followed by textStyle, decoration, and child properties. The child property is the same as the previous example which is taking the Text widget as a child. The textStyle property is adding style to the message property, in this property the font size is set to 15, text color to white, and font-weight to normal. The decoration property is in charge of the styling of the tooltip box, in this case, we have made one of the corners round, added a shadow to the tooltip, and gave green color to the tooltip.

Flutter also offers some other ways of displaying the description of a widget in a more beautiful way. One of the ways is by using showcaseview package. And if you still want something different you can create your own custom widget to do the job.