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.
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.
You can use richMessage
option available inside Tooltip, which support any widget you want to pass to the tooltip
Tooltip(
padding: const EdgeInsets.all(Spacing.xlarge),
decoration: const BoxDecoration(color: Color(0xffE7E5FB)),
richMessage: WidgetSpan(
alignment: PlaceholderAlignment.baseline,
baseline: TextBaseline.alphabetic,
child: Container(
padding: const EdgeInsets.all(10),
constraints: const BoxConstraints(maxWidth: 300),
child: Row(
children: [
const Icon(Icons.abc_outlined),
const SizedBox(width: 20),
SizedBox(
width: 200,
child: Text(
'This is a example tooltip text which is visible inside',
),
),
],
),
),
),
child: Icon(
Icons.info,
size: 12,
),
);