Flutter Tooltip

A tooltip is a material design class in Flutter that provides text labels to explain the functionality of a button or user interface action. In other words, it is used to show additional information when the user moves or points over a particular widget. It increases the accessibility of our application. If we wrap the widget with it, then it is very useful when the user long presses the widget because, in that case, it appears as a floating label.

Properties:

The following are the properties used to customize the application.

message: It is a string message used to display in the tooltip.

height: It is used to specify the height of the tooltip's child.

textStyle: It is used to determine the style for the message of the tooltip.

margin: It is used to determine the empty space surrounds the tooltip.

showDuration: It is used to specify the length of time for showing the tooltip after a long press is released. By default, it is 1.5 seconds.

decoration: It is used to define the shape and background color of the tooltip. The default tooltip shape is a rounded rectangle that has a border-radius of 4.0 PX.

verticalOffset: It determines the vertical gap between the tooltip and the widget.

waitDuration: It is used to specify the time when a pointer hovers over a tooltip's widget before showing the tooltip. When the pointer leaves the widget, the tooltip message will be disappeared.

padding: It determines the space to inset the tooltip's child. By default, it is 16.0 PX in all directions.

preferBelow: It is used to specify whether the tooltip is being displayed below the widget or not. By default, it is true. The tooltip will be displayed in the opposite direction if we have not sufficient space to display the tooltip in the preferred direction.

How to use Tooltip Widget in Flutter?

We can use the tooltip in Flutter as the below code:

1. Tooltip(  
2.         message: 'User Account',  
3.         child: IconButton(  
4.         icon: Icon(Icons.high_quality),  
5.         onPressed: () {  
6.         /* your code */  
7.         },  
8.     ),  
9. ),  

Output

Example

Let us understand it with the help of an example where we are trying to cover most of the above properties. In the following example, we are going to use a FlatButton with Icon as a child and surround this button with a tooltip. If we long press on this button, it will display a label with the message provided for the tooltip widget.

1. import 'package:flutter/material.dart';  
2.   
3. void main() {runApp(MyApp());}  
4.   
5. class MyApp extends StatelessWidget {  
6.   @override  
7.   Widget build(BuildContext context) {  
8.     return MaterialApp(  
9.         home: MyHomePage()  
10.     );  
11.   }  
12. }  
13.   
14. class MyHomePage extends StatefulWidget {  
15.   @override  
16.   _MyHomePageState createState() => _MyHomePageState();  
17. }  
18.   
19. class _MyHomePageState extends State<MyHomePage> {  
20.   @override  
21.   Widget build(BuildContext context) {  
22.     return Scaffold(  
23.       appBar: AppBar(  
24.         title: Text("Flutter Tooltip Example"),  
25.       ),  
26.       body: Row(  
27.           mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
28.           children:<Widget>[  
29.             Container(  
30.               margin: EdgeInsets.all(10),  
31.               child: Tooltip(  
32.                   waitDuration: Duration(seconds: 1),  
33.                   showDuration: Duration(seconds: 2),  
34.                   padding: EdgeInsets.all(5),  
35.                   height: 35,  
36.                   textStyle: TextStyle(  
37.                       fontSize: 15, color: Colors.white, fontWeight: FontWeight.normal),  
38.                   decoration: BoxDecoration(  
39.                       borderRadius: BorderRadius.circular(10), color: Colors.green),  
40.                   message: 'My Account',  
41.                   child: FlatButton(  
42.                     child: Icon(  
43.                       Icons.account_box,  
44.                       size: 100,  
45.                     ),  
46.                   )),  
47.             ),  
48.             Container(  
49.               margin: EdgeInsets.all(10),  
50.               child: Tooltip(  
51.                   message: 'My Account',  
52.                   child: FlatButton(  
53.                     child: Icon(  
54.                       Icons.account_box,  
55.                       size: 100,  
56.                     ),  
57.                   )  
58.               ),  
59.             )  
60.           ]  
61.       ),  
62.     );  
63.   }  
64. }  

Output:

When we run the app in our IDE, we will see the UI as below screenshot:

If we long-press the icon, we will see the tooltip as below screenshot.