How to make a tooltip that contains information, images and icons with flutter?

Question

I am trying to make a desktop application where there are characters from a game and I need that when the mouse is positioned over it by hovering, an information box about it is displayed on the character.

I tried with the tooltip widget, but it only works for text and it is not what I need, I need to be able to show images, icons, etc, in short, the widget that I want.

Something similar to this image.

Tooltip width image and icons

What I mean could be a code like this:

Widget build(BuildContext context) {
    return Center(
      child: Tooltip(
        message: Container(
          width: 100,
          height: 100,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Colors.grey,
          ),
          child: Column(
            children: [
              const SizedBox(height: 10),
              Text(
                'This is a tooltip',
                style: TextStyle(
                  fontSize: 14,
                ),
              ),
              const SizedBox(height: 10),
              Icon(Icons.thumb_up_alt),
            ],
          )
        ),
        child: Image.asset(
          'assets/image.png',
          height: 300,
          width: 300,
        ),
      ),
    );
  }

It is a single example of code that does not work but it is useful to understand what I need.

PS: I don't know how to make the image show like some people do in other questions, sorry for the inconvenience.

Answer 1

I was looking to do the same thing. This package seems pretty good. It came out two years ago and looks to still be maintained: https://pub.dev/packages/super_tooltip

Answer 2

Tooltip is a built-in widget in flutter based on material design, which displays a textual description of the widget in a floating label when a user long-pressed and or hover over the widget.

Widget build(BuildContext context) {
return Center(
  child: Tooltip(
    message: 'this is image',
    child: Image.asset(
      'assets/Bella.png',
      height: 300,
      width: 300,
    ),
  ),
);

}