Tooltip message text and background color

Question

I have Image.asset wrapped on Tooltip

Padding(
     padding: edgeInsets,
     child: Tooltip(preferBelow: false, message: "Miejsca parkingowe ogólnodostępne", child: Image.asset("assets/icons/garage.png", width: _iconSize, height: _iconSize,)),
),

How to set tooltip message text color and background color?

score 3 · Answer 1 · answered Sep 03 '19 at 08:38

ToolTip supports the decoration named argument, so you don't need to change your top-level theme.

/// Specifies the tooltip's shape and background color.
///
/// If not specified, defaults to a rounded rectangle with a border radius of
/// 4.0, and a color derived from the [ThemeData.textTheme] if the
/// [ThemeData.brightness] is dark, and [ThemeData.primaryTextTheme] if not.
final Decoration decoration;

However, there are other widgets, that include the ToolTip widget in their build method, for example, IconButton where they only support a tooltip as a String, so there's no way currently to change the tooltip style for the IconButton

score 3 · Answer 2 · answered Apr 27 '20 at 11:00

You can change color of tootip with textStyle attribute. and background color of tooltip with decoration attribute.

    Padding(
         padding: edgeInsets,
         child: Tooltip(textStyle: TextStyle(color: Colors.white),decoration: BoxDecoration(color: Colors.red),text preferBelow: false, message: "Miejsca parkingowe ogólnodostępne", 
         child: Image.asset("assets/icons/garage.png", width: _iconSize, height: _iconSize,)),
     ),

score 0 · Accepted Answer · answered Mar 30 '19 at 06:30

I think, Tooltip does'not provide a parameter to change these behaviors but

Tooltip takes the your theme

final ThemeData theme = Theme.of(context);
    final ThemeData darkTheme = ThemeData(
      brightness: Brightness.dark,
      textTheme: theme.brightness == Brightness.dark ? theme.textTheme : theme.primaryTextTheme,
      platform: theme.platform,
    );

so you can create theme in your MaterialApp (Text color works but backgroundColor does'not work in my app, you can give a try)

return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        backgroundColor: Colors.amber,
        primaryTextTheme: TextTheme(
          body1: TextStyle(
            color: Colors.blue,
          )
        ),
        primarySwatch: Colors.blue,
      ),
      home: ......

or

This is Tooltip code may be you can change from the source code of the Tooltip which is an bad solution.

    return Positioned.fill(
      child: IgnorePointer(
        child: CustomSingleChildLayout(
          delegate: _TooltipPositionDelegate(
            target: target,
            verticalOffset: verticalOffset,
            preferBelow: preferBelow,
          ),
          child: FadeTransition(
            opacity: animation,
            child: Opacity(
              opacity: 0.9,
              child: ConstrainedBox(
                constraints: BoxConstraints(minHeight: height),
                child: Container(
                  decoration: BoxDecoration(
                    color: darkTheme.backgroundColor,
                    borderRadius: BorderRadius.circular(2.0),
                  ),
                  padding: padding,
                  child: Center(
                    widthFactor: 1.0,
                    heightFactor: 1.0,
                    child: Text(message, style: darkTheme.textTheme.body1),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );

THX. Text color works but backgroundColor does'not work for me too :) — Maciek, Mar 30 '19 at 11:11
If you are looking to change the background color of Tooltip you can use the 'decoration' parameter it has, and just pass a BoxDecoration with your custom colors and whatnot. Mind you that BoxDecoration does not have rounded corners by default but you can easily add it again with the BorderRadius parameter. — tapizquent, Aug 20 '19 at 23:03

score 0 · Answer 4 · answered Mar 27 '21 at 01:27

You can create a TooltipThemeData and set it into your top-level ThemeData.

TooltipThemeData(
  textStyle: TextStyle(
    color: Colors.white,
    fontFamily: "Questrial",
    fontWeight: FontWeight.bold,
  ),
  decoration: BoxDecoration(
    color: Colors.indigo,
    borderRadius: BorderRadius.circular(20),
  ),
);

score 0 · Answer 5 · edited Jun 18 '21 at 01:29

It's possible set the color of an individual icon's tooltip by setting TooltipTheme as the parent widget, for example as follows:

TooltipTheme(
  data: TooltipThemeData(
    textStyle: TextStyle(fontSize: 15, color: Colors.white),
    decoration: BoxDecoration(
      color: Colors.blue[300],
      borderRadius: BorderRadius.all(Radius.circular(5.0)),
    ),
  ),
  child: IconButton(
    tooltip: 'Icon Title',
    icon: Icon(Icons.analytics, color: Colors.black, size: 50),
    onPressed: () {}
  ),
)

As per the documentation.

Tooltip message text and background color

5 Answers5