material-components_material-components-flutter/docs/components/tooltips.md

Tooltips

Tooltips display informative text when users hover over, focus on, or tap an element.

Contents

• Using tooltips
• Tooltips example
• Theming tooltips

Using tooltips

When activated, tooltips display a text label identifying an element, such as a description of its function.

Making tooltips accessible

Screen readers will read the message property of the Tooltip. Adding tooltips is also a good way to make other Widgets in your app more accessible.

Key properties for tooltips

A tooltip has text label and a container.

1. Text label
2. Container

Text label for tooltip

	Property
Text label	message of Tooltip
Color	color of textStyle of Tooltip
Typography	textStyle of Tooltip

Container for tooltip

	Property
Color	color of decoration of Tooltip
Shape	shape of decoration of Tooltip

Tooltips example

Tooltip

• Class defintion
• GitHub source
• Dartpad demo

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tooltip Demo',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Tooltip(
            message: 'play',
            child: Icon(Icons.play_arrow),
          ),
        ),
      ),
    );
  }
}

Theming tooltips

Tooltips support Material Theming and can be customized in terms of color, typography, and shape.

To change the background color and shape, use the decoration property. To change the text typography, color, etc, use the textStyle property.

Tooltip

• Class defintion
• GitHub source
• Dartpad demo

The following example shows a play icon and tooltip using Material's Reply theme.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tooltip Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        tooltipTheme: TooltipThemeData(
          decoration: ShapeDecoration(
            color: Color(0xFF232F34),
            shape: StadiumBorder(),
          ),
          textStyle: TextStyle(color: Colors.white),
        ),
      ),
      home: Scaffold(
        body: Center(
          child: Tooltip(
            message: 'Play',
            child: Icon(Icons.play_arrow),
          ),
        ),
      ),
    );
  }
}