Custom tooltip that shows TextStyle info on flutter web

semantics_overlay.dart

class AppText extends StatelessWidget {
  const AppText(
    this.text, {
    super.key,
    required this.textStyle,
    required this.textAlign,
  });
 
  final String text;
  final TextStyle textStyle;
  final TextAlign textAlign;
 
  @override
  Widget build(BuildContext context) {
    return SemanticsOverlay(
      info: textStyle.toString(),
      child: Text(
        text,
        style: textStyle,
        textAlign: textAlign,
      ),
    );
  }
}
 
class SemanticsOverlay extends StatefulWidget {
  const SemanticsOverlay({
    super.key,
    required this.child,
    required this.info,
  });
  final Widget child;
  final String info;
 
  @override
  State<SemanticsOverlay> createState() => _SemanticsOverlayState();
}
 
class _SemanticsOverlayState extends State<SemanticsOverlay> {
  final _overlayPortalController = OverlayPortalController();
 
  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) {
        _overlayPortalController.show();
      },
      onExit: (_) {
        _overlayPortalController.hide();
      },
      child: OverlayPortal(
        controller: _overlayPortalController,
        overlayChildBuilder: (_) {
          late final renderedWidget = context.findRenderObject() as RenderBox;
          late final renderedOffset = renderedWidget.localToGlobal(Offset.zero);
          late final renderedSize = renderedWidget.size;
          return Positioned(
            top: renderedOffset.dy + renderedSize.height,
            left: renderedOffset.dx + (renderedSize.width / 2),
            child: Container(
              padding: const EdgeInsets.all(20),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12),
                border: Border.all(),
                boxShadow: const [
                  BoxShadow(
                    color: Colors.black26,
                    offset: Offset(5, 10),
                  )
                ],
              ),
              width: 250,
              child: Text(
                widget.info,
                style: const TextStyle(
                  color: Colors.pink,
                  fontSize: 12,
                ),
              ),
            ),
          );
        },
        child: widget.child,
      ),
    );
  }
}