Add text button to tooltip Flutter

Question

Is there a way to add a TextButton or Button to a Tooltip?

I want to display a summary in the Tooltip, with a link to an article that explains more about it.

Using a richMessage with a GestureDetector doesn't seem to work as tapping anywhere on the tooltip will close the tooltip instead of triggering the onTap:

                          Tooltip(
                                 preferBelow: false,
                                  padding: EdgeInsets.all(12.0),
                                  showDuration: Duration(
                                    seconds: 10,
                                  ),
                                  richMessage: TextSpan(
                                    text: "This is some basic info... ",
                                    children: <InlineSpan>[
                                      WidgetSpan(
                                          alignment: PlaceholderAlignment.baseline,
                                          baseline: TextBaseline.alphabetic,
                                          child: GestureDetector(
                                            onTap: (() {
                                              bloc.launchURL(
                                                LaunchLink.learnMore,
                                              );
                                            }),
                                            child: TextButton(
                                              child: Text(
                                                'LEARN MORE',
                                                style: TextStyle(color: Colors.blue),
                                              ),
                                              onPressed: (() {
                                                bloc.launchURL(
                                                  LaunchLink.learnMore,
                                                );
                                              }),
                                            ),
                                          )),
                                      const TextSpan(
                                        text: '.',
                                      ),
                                    ],
                                  ),
                                  triggerMode: TooltipTriggerMode.tap,
                                  child: Icon(
                                    Icons.info_rounded,
                                    color: Color(AppColors.blue),
                                    size: 18,
                                  ),
                                ),

Kaushik Chandru Kaushik Chandru · Accepted Answer · 2022-07-28T16:43:26

Assign a key to tool tip

final key = GlobalKey();

Tooltip(
  key: key,
  ...
),

then on pressed you can make keep it visible like

onPressed: () {
  final dynamic _tooltip = key.currentState;
  _tooltip.ensureTooltipVisible();
},

and to close the tooltip you can use

tooltip.deactivate()

Add text button to tooltip Flutter

1 Answers