Flutter Tooltip on One Tap

Question

I want to show a tooltip on a single tap, not a long tap.

Can anyone help me with this?

Tooltip(
  message: e.title,
  child: Card(
    semanticContainer: true,
    child: Padding(
      padding: EdgeInsets.symmetric(
          vertical: 12,
          horizontal: 12
      ),
      child: Center(
        child: Image.network(
          e.icon,
          height: 40,
        ),
      ),
    ),
  ),
)

Current best answer is @pragmateek 's. That is the official solution, as the current Tooltip provides a way of doing what you need out-of-the-box. There is no need to wrap it up in any other Widget or make your own Tooltip. — Javi Marzán, Oct 16 '21 at 12:57

score 47 · Answer 1 · answered Oct 06 '21 at 08:07

47

The easiest way to do it is to use triggerMode property inside Tooltip constructor.

  Tooltip(
    message: item.description ?? '',
    triggerMode: TooltipTriggerMode.tap,
    child: Text(item.label ?? '',
        style: TextStyle(
          fontWeight: FontWeight.w500,
          fontSize: 1.7.t.toDouble(),
          color: Colors.black.withOpacity(0.6),
        )),
  )

answered Oct 06 '21 at 08:07

pragmateek

682
5
10

2

Ideally this should work. But it doesn't in Flutter 2.14.2. Possible bug? – Prem Kumar Easwaran Jan 18 '22 at 16:06
3

Also not working on my end. Flutter 2.10.3 – Tiny Mar 18 '22 at 16:55
3

This is not working on Flutter 3 – kallis May 19 '22 at 12:07
1

this is working with flutter 3 – Zhar Nov 12 '22 at 09:46

Nagual · Accepted Answer · 2022-09-19T09:36:31.193

UPDATE: use triggerMode: TooltipTriggerMode.tap, instead

THIS SOLUTION IS OBSOLETE
as an option you can create simple wrapper widget
full example:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Home());
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Home")),
      body: Center(
        child: MyTooltip(
          message: 'message',
          child: Image.network('https://picsum.photos/seed/picsum/200/300', height: 40),
        ),
      ),
    );
  }
}

class MyTooltip extends StatelessWidget {
  final Widget child;
  final String message;

  MyTooltip({@required this.message, @required this.child});

  @override
  Widget build(BuildContext context) {
    final key = GlobalKey<State<Tooltip>>();
    return Tooltip(
      key: key,
      message: message,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () => _onTap(key),
        child: child,
      ),
    );
  }

  void _onTap(GlobalKey key) {
    final dynamic tooltip = key.currentState;
    tooltip?.ensureTooltipVisible();
  }
}

I added a Timer after showing o Tooltip to hide it programmatically. Timer(Duration(milliseconds: 2500), () => tooltip?.dispose()); — Glaudson Silva, May 27 '21 at 00:33
^ Using `.dispose()` won't let the user reopen the tooltip. Instead try: ```.deactivate()``` — Justin Hendrickson, Jun 17 '21 at 00:59
This is not the actual solution anymore. Please see: https://stackoverflow.com/a/69461966/5535773 — Rebar, Sep 17 '22 at 23:25

Flutter Tooltip on One Tap

2 Answers2

Linked