Flutter: How to display Tooltip for TextSpan inside RichText

Question

I have big paragraph, and many words have to have tooltip message. When you click on any of these words, then tooltip message should be appeared.

I tried to use RichText widget where it contains many TextSpan children like below:

RichText(
  text: TextSpan(
     children: <TextSpan>[
        TextSpan(text: "Welcome to"),
        TextSpan(text: "Flutter"),
        ... 
     ]),
),

I need to display tooltip text when i click on TextSpan I tried to wrap TextSpan with Tooltip widget

RichText(
  text: TextSpan(
     children: <TextSpan>[
        TextSpan(text: "Welcome to"),
        ...
        Tooltip(
            message: "any text here",
            child: TextSpan(text: "Flutter"),
        ),
        ...            
     ]),
),

but this is not possible since the children have to be TextSpan only.

anyone have an idea on how to achieve this requirement?

Apparently `WidgetSpan` should help you in this situation. Chek this [answer](https://stackoverflow.com/a/56928690/1903781) — Adrian Moisa, May 03 '22 at 18:46

Mariano Zorrilla · Accepted Answer · 2020-02-24T20:26:26.173

7

With TextSpan you have 2 ways to do it: With or without using children parameter.

Widget _toolTipSimple() {
    return Center(
      child: Tooltip(
        message: "Flutter",
        child: RichText(
          text: TextSpan(
              text: "Welcome to", style: TextStyle(fontSize: 70)),
        ),
      ),
   );
}

This one is a complex version without a Tooltip but it handles the click on a specific word:

Widget _snackBarTextSpanChildren(BuildContext context) {
    return Center(
      child: RichText(
        textAlign: TextAlign.center,
        text: TextSpan(
          children: [
            TextSpan(text: "Welcome to ", style: TextStyle(fontSize: 70)),
            TextSpan(
                text: "Flutter",
                style: TextStyle(fontSize: 70),
                recognizer: TapGestureRecognizer()..onTap = () {
                  Scaffold.of(context).showSnackBar(SnackBar(content: Text('Hello!')));
                }),
          ],
        ),
      ),
    );
  }

The result for this one is the following:

edited Feb 24 '20 at 20:26

answered Feb 24 '20 at 18:45

Mariano Zorrilla

7,165
2
34
52

Thanks for your suggestion. but this will not be useful for me, since i have big paragraph and many words have to have tooltip message, and when you click on any of these words, then tooltip message should be appeared. – Osama Na Feb 24 '20 at 20:00
I updated my response. Is not a Tooltip but is a way to detect clicks on a specific word and show anything you want. I'm trying to see if the word can be attached to a Tooltip this one. – Mariano Zorrilla Feb 24 '20 at 20:27
There's an open bug on Github to "maybe" have the location of a TextSpan: https://github.com/flutter/flutter/issues/32137 – Mariano Zorrilla Feb 24 '20 at 21:14
Your updated response is great. Many thanks for this solution. – Osama Na Feb 24 '20 at 21:45

score 6 · Answer 2 · answered May 08 '21 at 23:16

You can create a custom WidgetSpan like this:

class TooltipSpan extends WidgetSpan {
  TooltipSpan({
    @required String message,
    @required InlineSpan inlineSpan,
  }) : super(
          child: Tooltip(
            message: message,
            child: Text.rich(
              inlineSpan,
            ),
          ),
        );
}

and wrap your TextSpan with it:

RichText(
  text: TextSpan(
     children: <TextSpan>[
        TextSpan(text: "Welcome to"),
        ...
        TooltipSpan(
            message: "any text here",
            inlineSpan: TextSpan(text: "Flutter"),
        ),
        ...            
     ]),
),

score 1 · Answer 3 · answered Feb 24 '20 at 18:43

I tried to do what you need but didint work since SpanText work only, but if you Check below code my work for you :)

Center(
          // Center is a layout widget. It takes a single child and positions it
          // in the middle of the parent.
          child: Column(
              // Column is also a layout widget. It takes a list of children and
              // arranges them vertically. By default, it sizes itself to fit its
              // children horizontally, and tries to be as tall as its parent.
              //
              // Invoke "debug painting" (press "p" in the console, choose the
              // "Toggle Debug Paint" action from the Flutter Inspector in Android
              // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
              // to see the wireframe for each widget.
              //
              // Column has various properties to control how it sizes itself and
              // how it positions its children. Here we use mainAxisAlignment to
              // center the children vertically; the main axis here is the vertical
              // axis because Columns are vertical (the cross axis would be
              // horizontal).
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                RichText(
                  text: TextSpan(
                      style: TextStyle(color: Colors.black),
                      children: <TextSpan>[
                        TextSpan(text: "Welcome to"),
                      ]),
                ),
                Tooltip(
                  message: 'any text here',
                  child: Text('Flutter'),
                  ),
              ]
                ),
              ),

,

Flutter: How to display Tooltip for TextSpan inside RichText

3 Answers3

Linked