Implementing Tooltips in Flutter

Last updated on October 11, 2021 The Plumber Loading... Post a comment

A tooltip displays an informative message when users hover, tap, or focus on an element.

In Flutter, you can use a built-in widget named Tooltip to create tooltips with ease. This article walks you through the fundamentals of the Tooltip widget and an example of using it in practice.

Overview

In order to add a tooltip to a widget, what you need to do is to wrap that widget inside a Tooltip widget, like this:

Tooltip(
   message: 'This is a tooltip',
   child: OutlinedButton(onPressed: () {}, child: const Text('A Button')),
)

Common options:

  • height: Specifies the height of the tooltip
  • padding: Padding of the tooltip
  • margin: Margin of the tooltip
  • decoration: Controls the shape and background color of the tooltip
  • preferBelow: The tooltip will show up below the child or not
  • showDuration: How long the tooltip will be shown
  • textStyle: The style of the tooltip’s message
  • waitDuration: The amount of time that a pointer must over the tooltip before the message appears
  • verticalOffset: The vertical gap between the widget and the displayed tooltip
  • enableFeedback: Whether the tooltip provides acoustic and/or haptic feedback

The Example

Preview

The Code

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('KindaCode.com'),
      ),
      body: Center(
          child: Tooltip(
              message: 'This is a cute dog. Do you like him?',
              padding: const EdgeInsets.all(30),
              margin: const EdgeInsets.only(top: 80, left: 50),
              decoration: BoxDecoration(
                  color: Colors.indigo,
                  borderRadius: BorderRadius.circular(20)),
              textStyle: const TextStyle(
                  fontSize: 15,
                  fontStyle: FontStyle.italic,
                  color: Colors.white),
              child: SizedBox(
                width: 320,
                height: 240,
                child: Image.network(
                  'https://www.kindacode.com/wp-content/uploads/2021/10/the-dog.jpeg',
                  fit: BoxFit.cover,
                ),
              ))),
    );
  }

You can find more details about the Tooltip widget in the official documentation.

Conclusion

You’ve learned the fundamentals and gone through an example of using the Tooltip widget to provide extra useful information to your users. If you’d like to explore more new and awesome features in Flutter, take a look at the following articles:

You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles