Flutter Tooltip over Button

93 Views Asked by At

I have an OutlinedButton wrapped in a Tooltip widget, I added a margin to the tooltip to position it to the right of the button.

When I hover the button, it's supposed to change the cursor to the hand click icon and set the button to the hovered state (blue border).

The problem is, since the tooltip and its margin appear in front of the button, the button is no longer in a hovered state, it is no longer blue and not clickable.

I have tried IgnorePointer, AbsorbPointer, GestureDetector, etc.

My last option is to build a custom layout and stop using the Tooltip. Any other option?

Sample code:

class ToolTipTest extends StatelessWidget {
  const ToolTipTest({
    super.key,
  });

  @override
  Widget build(final BuildContext context) {
    return Tooltip(
      message: 'name',
      verticalOffset: -5.0,
      margin: const EdgeInsets.only(left: 60.0),
      child: Container(
        color: Colors.white10,
        width: 50.0,
        height: 50.0,
        child: TextButton(
          onPressed: () {},
          child: const Text('test'),
        ),
      ),
    );
  }
}

Mouse hover over the tooltip Mouse hover on an area where the tooltip is not

0

There are 0 best solutions below