Tooltip

The Tooltip Widget is used to provide information to the user for a specific unit.
This is useful when there is additional information that you wish to convey to the user.

Basic Usage

Tooltip

In Flutter, tooltips can be displayed using Tooltip.
Specify any text in message and the widget you wish to target in child.

Tooltip(
  message: "I'm tooltip!",
  child: TextButton(
    onPressed: () {}, child: const Text("Mouse over this text")
  ),
)

Position

verticalOffset

By adjusting the value of verticalOffset, the position of the tooltip in the vertical direction can be adjusted.
It is also possible to adjust the left and right directions by adjusting the value of margin.

Tooltip(
  verticalOffset: -48,
  message: "I'm tooltip!",
  child: TextButton(onPressed: () {}, child: const Text("Top")),
),

Note when Tooltip is displayed on the right or left

We have confirmed that onPressed does not fire on buttons specified with `child` when `margin` is specified.
If you wish to use this function, please test it thoroughly in your environment and consider using it.

We are currently investigating a solution to this problem.

Styling

BoxDecoration

The decoration property can be used to change the style of the background color, border, etc.
Various other properties are also available to flexibly change the appearance.

Tooltip(
  message: "I'm tooltip!",
  padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 20),
  decoration: BoxDecoration(
    color: Colors.purple[300],  // background color
    borderRadius: BorderRadius.circular(10) // border radius
  ),
  textStyle: const TextStyle(fontSize: 14, color: Colors.white),
  child: TextButton(
      onPressed: () {}, child: const Text("Mouse over this text")
  ),
)

API

For further information, please refer to the official documentation below.

Tooltip()