Flutter: How to display Tooltip for TextSpan inside RichText
2,265
Solution 1
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:
Solution 2
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"),
),
...
]),
),
Author by
Osama Na
Updated on December 01, 2022Comments
-
Osama Na over 1 year
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 wrapTextSpan
withTooltip
widgetRichText( 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?
-
Osama Na about 4 yearsThanks 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.
-
Mariano Zorrilla about 4 yearsI 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 about 4 yearsThere's an open bug on Github to "maybe" have the location of a TextSpan: github.com/flutter/flutter/issues/32137
-
Osama Na about 4 yearsYour updated response is great. Many thanks for this solution.