Custom tooltip

main.dart

import 'dart:async';

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(const App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.light,
        useMaterial3: true,
        typography: Typography.material2021(
          platform: defaultTargetPlatform,
        ),
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => const Home(),
      },
    );
  }
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('App Bar'),
      ),
      body: Center(
        child: MyTooltip(
          overlayBuilder: (context) => Card(
            color: Colors.yellow,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: ElevatedButton(
                onPressed: () {},
                child: const Text('Click Me!'),
              ),
            ),
          ),
          overlaySize: const Size(120, 50),
          child: const SizedBox(
            width: 100,
            height: 100,
            child: ColoredBox(
              color: Colors.red,
              child: Center(
                child: Text('Here'),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class MyTooltip extends StatefulWidget {
  const MyTooltip({
    Key? key,
    required this.overlayBuilder,
    required this.overlaySize,
    required this.child,
  }) : super(key: key);

  final WidgetBuilder overlayBuilder;
  final Size overlaySize;
  final Widget child;

  @override
  State<MyTooltip> createState() => _MyTooltipState();
}

class _MyTooltipState extends State<MyTooltip> {
  OverlayEntry? _entry;
  Timer? _dismissTooltip;

  void _onHover(PointerEvent event) {
    _dismissTooltip?.cancel();
    _dismissTooltip = null;
    if (_entry == null) {
      _insertOverlay(event.position);
    }
  }

  void _onExit(PointerExitEvent event) {
    _dismissTooltip = Timer(const Duration(milliseconds: 500), () {
      _removeOverlay();
    });
  }

  void _insertOverlay(Offset mousePosition) {
    final OverlayState overlayState = Overlay.of(
      context,
      debugRequiredFor: widget,
    )!;

    final RenderBox box = context.findRenderObject()! as RenderBox;
    final Offset target = box.localToGlobal(
      box.size.bottomLeft(Offset.zero),
      ancestor: overlayState.context.findRenderObject(),
    );

    final size = widget.overlaySize;
    final overlayEntry = OverlayEntry(
      builder: (context) {
        return Positioned(
          width: size.width,
          height: size.height,
          left: target.dx,
          top: target.dy,
          child: MouseRegion(
            onHover: _onHover,
            onExit: _onExit,
            child: widget.overlayBuilder(context),
          ),
        );
      },
    );
    _entry = overlayEntry;
    overlayState.insert(overlayEntry);
  }

  void _removeOverlay() {
    _entry?.remove();
    _entry = null;
  }

  @override
  void dispose() {
    _removeOverlay();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onHover: _onHover,
      onExit: _onExit,
      child: widget.child,
    );
  }
}