Table of contents
1.
Introduction
2.
Flutter Tooltip
3.
Flutter Tooltip Example
4.
Tooltip Menu Example
5.
Frequently Asked Questions
5.1.
What is Flutter used for?
5.2.
Is Flutter better than Java?
5.3.
Is Flutter a programming language?
5.4.
What is a Flutter tooltip?
5.5.
What is the Flutter tooltip used for?
6.
Conclusion
Last Updated: Mar 27, 2024
Easy

Flutter Tooltip

Author Abhay Trivedi
1 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

In this article, we will learn how to use Tooltip in Flutter. The Flutter Tooltip is a built-in widget in flutter based on material design, which shows a textual description of a widget in a floating label when a user long-pressed and or hovers over the widget. The tooltip widget becomes very helpful when the UI of the application is too dense to display all the information on the screen; in a way, it makes the app more accessible.

Flutter Tooltip

A Flutter tooltip is a material design class in Flutter that delivers text labels to describe the functionality of a button or a user interface action. In other words, we used it to show additional information when the user moves or points over a particular widget. It improves the accessibility of the application. Wrapping the widget with it is beneficial when the user long presses the widget because, in that case, it emerges as a floating label.

There are two methods to implement the tooltip in a widget. The first is by using the widget itself; the other way is limited to some widgets such as IconButton, FloatingActionButton, etc., which provide a tooltip as a property that takes in a string as a parameter. One should keep in mind that the Tooltip widget is customizable through its properties, but the tooltip property isn’t.

Properties Descriptions

message

A string message is used to display in the tooltip.

height

Used to set the height of the tooltip's child.

textStyle

Used to decide the style for the message of the tooltip.

margin

Used to determine the space surrounding the tooltip.

showDuration

Specifies the length of time for showing the tooltip after a long press is released. By default, it is 1.5 seconds.

decoration

Used to determine the shape and background color of the tooltip, the default tooltip shape is a rounded rectangle with a 4.0 PX border-radius.

verticalOffset

Determines the vertical gap between the widget and the tooltip.

waitDuration

Specifies the time when a pointer hovers over a tooltip's widget before displaying the tooltip. When the pointer escapes the widget, the tooltip message will be disappeared.

padding

Determines the space to insert the tooltip's child. By default, it is 16.0 PX in all directions.

preferBelow

Specifies whether the tooltip is being displayed below the widget or not. By default, it is true. We will show the tooltip in the opposite direction if we do not have sufficient space to show the tooltip in the preferred direction.

 

Demo example:

Tooltip(  
        message: 'User Account',  
        child: IconButton(  
        icon: Icon(Icons.high_quality),  
        onPressed: () {  
        /* your code */  
        },  
    ),  
),  

The IconButton tooltip property is employed, taking a string parameter. One can notice that pressing the icon on the screen for more than one-second displays the tooltip. This is one of the ways of using the tooltip for the widgets, but this is all it has got; Anything else to change its looks can't be done. In the body, we have two user account icons that we created in a container with some padding, and in it, we have the widget Tooltip. When we use the tooltip, the message property is a must provide, and in this case, it is 'User Account' that pops up when the text is hovered or long pressed.

Flutter Tooltip Example

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Tooltip Example"),
      ),
      body: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[
        Container(
          margin: EdgeInsets.all(10),
          child: Tooltip(
              waitDuration: Duration(seconds: 1),
              showDuration: Duration(seconds: 2),
              padding: EdgeInsets.all(5),
              height: 40,
              textStyle: TextStyle(fontSize: 15, color: Colors.white, fontWeight: FontWeight.normal),
              decoration: BoxDecoration(borderRadius: BorderRadius.circular(10), color: Colors.red),
              message: 'My Account',
              child: FlatButton(
                onPressed: () async {},
                child: Icon(
                  Icons.account_box,
                  size: 120,
                ),
              )),
        ),
        Container(
          margin: EdgeInsets.all(10),
          child: Tooltip(
              message: 'My Account',
              child: FlatButton(
                onPressed: () async {},
                child: Icon(
                  Icons.account_box,
                  size: 120,
                ),
              )),
        ),
        Container(
          margin: EdgeInsets.all(10),
          child: Tooltip(
              message: 'My Account',
              child: FlatButton(
                onPressed: () async {},
                child: Icon(
                  Icons.account_box,
                  size: 120,
                ),
              )),
        ),
        Container(
          margin: EdgeInsets.all(10),
          child: Tooltip(
              message: 'My Account',
              child: FlatButton(
                onPressed: () async {},
                child: Icon(
                  Icons.account_box,
                  size: 120,
                ),
              )),
        )
      ]),
    );
  }
}

 

Output:

Ideal:

On long press:

Tooltip Menu Example

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
          title: Text('Tooltip Menu Example'),
          backgroundColor: Colors.orange[900],
          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',
                textStyle: TextStyle(fontSize: 16, color: Colors.white, fontWeight: FontWeight.normal),
                child: Text(
                  'Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.',
                  style: TextStyle(
                    color: Colors.grey,
                    fontSize: 22,
                  ), //TextStyle
                ), //Text
              ), //Tooltip
            ), //Padding
            color: Colors.orange[50],
            width: 300,
            height: 200,
          ), //Container
        ], //<Widget>[]
      ) //Row
          ), //Center
    ), //Scaffold
    debugShowCheckedModeBanner: false,
  )); //MaterialApp
}

 

Output:

Frequently Asked Questions

What is Flutter used for?

Flutter is Google's portable UI toolkit for crafting attractive, natively compiled mobile, web, & desktop applications from a single codebase. The Flutter works with existing code, is used by developers and organizations worldwide, and is free and open source.

Is Flutter better than Java?

Flutter is Google's Cross-platform framework that is faster, while Java language is a safer option for its strong support, documentation, and continuously updated. Different tools are also available for mobile, web, and desktop application development, but these two have the upper hand on the rest of the frameworks.

Is Flutter a programming language?

No, Flutter is not a programming language. Flutter is an SDK(software development kit) with prewritten code consisting of ready-to-use and customizable widgets, libraries, tools, and documentation that help build cross-platform apps.

What is a Flutter tooltip?

Flutter tooltip is a material design class in Flutter that delivers 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.

What is the Flutter tooltip used for?

A tooltip is a brief, informative message when a user interacts with an element in a graphical user interface (GUI). Tooltips are usually initiated in two ways: through a mouse-hover gesture or a keyboard-hover gesture.

Conclusion

This article gives information about Flutter Tooltip and its uses. Being a Flutter developer, you must be well versed with the concepts like Flutter Tooltip, which you have learned just now.

Also read Flutter CheckboxFlutter TableFlutter CalendarFlutter Tabbar.

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available. Take a look at the interview experiences and interview bundle for placement preparations.

Do upvote our blog to help other ninjas grow.

Happy Learning!

Live masterclass