Flutter Web中如何实现可点击且自动隐藏的Tooltip？

针对你遇到的第三方Tooltip组件在鼠标移至内部点击时自动隐藏、且无法自动延迟隐藏的问题，可以通过自定义组件来实现完全符合需求的功能，核心思路是监听鼠标在按钮和Tooltip区域的进入/离开事件，配合定时器控制显示隐藏逻辑。

自定义实现代码 #

import 'dart:async';
import 'package:flutter/material.dart';

class HoverClickableTooltip extends StatefulWidget {
  final Widget child;
  final Widget tooltipContent;
  final Duration showDelay;
  final Duration hideDelay;

  const HoverClickableTooltip({
    super.key,
    required this.child,
    required this.tooltipContent,
    this.showDelay = const Duration(milliseconds: 300),
    this.hideDelay = const Duration(milliseconds: 300),
  });

  @override
  State<HoverClickableTooltip> createState() => _HoverClickableTooltipState();
}

class _HoverClickableTooltipState extends State<HoverClickableTooltip> {
  bool _showTooltip = false;
  Timer? _hideTimer;
  Timer? _showTimer;

  void _startShowTimer() {
    _cancelTimers();
    _showTimer = Timer(widget.showDelay, () {
      if (mounted) setState(() => _showTooltip = true);
    });
  }

  void _startHideTimer() {
    _cancelTimers();
    _hideTimer = Timer(widget.hideDelay, () {
      if (mounted) setState(() => _showTooltip = false);
    });
  }

  void _cancelTimers() {
    _showTimer?.cancel();
    _hideTimer?.cancel();
  }

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.bottomCenter, // 可根据需求调整Tooltip位置
      children: [
        MouseRegion(
          onEnter: (_) => _startShowTimer(),
          onExit: (_) => _startHideTimer(),
          child: widget.child,
        ),
        if (_showTooltip)
          Padding(
            padding: const EdgeInsets.only(bottom: 48), // 避免Tooltip和按钮重叠
            child: MouseRegion(
              onEnter: (_) => _cancelTimers(), // 鼠标进入Tooltip时取消隐藏定时器
              onExit: (_) => _startHideTimer(),
              child: Container(
                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                decoration: BoxDecoration(
                  color: Colors.grey[800],
                  borderRadius: BorderRadius.circular(8),
                  boxShadow: const [
                    BoxShadow(
                      color: Colors.black26,
                      blurRadius: 6,
                      offset: Offset(0, 3),
                    ),
                  ],
                ),
                child: widget.tooltipContent,
              ),
            ),
          ),
      ],
    );
  }
}

使用示例 #

HoverClickableTooltip(
  child: ElevatedButton(
    onPressed: () => print('主按钮被点击'),
    child: const Text('悬停查看Tooltip'),
  ),
  tooltipContent: const Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Text(
        '可点击的Tooltip内容',
        style: TextStyle(color: Colors.white),
      ),
      SizedBox(height: 10),
      TextButton(
        style: TextButton.styleFrom(foregroundColor: Colors.lightBlueAccent),
        onPressed: () => print('Tooltip内按钮被点击'),
        child: Text('点击执行操作'),
      ),
    ],
  ),
)

核心逻辑说明 #

• 鼠标事件监听：通过MouseRegion分别监听主按钮和Tooltip区域的鼠标进入/离开事件，当鼠标移至Tooltip内部时，取消隐藏定时器，确保Tooltip不会消失，正常支持点击操作。
• 延迟控制：通过showDelay设置悬停按钮后多久显示Tooltip，hideDelay设置离开按钮和Tooltip区域后多久自动隐藏，避免频繁切换显示状态。
• 样式自定义：Tooltip的布局、颜色、阴影等样式完全可控，可根据项目需求调整。

这个实现完美解决了第三方组件的两个问题：光标移至Tooltip内部不会自动隐藏，支持点击操作；离开整个交互区域后自动延迟隐藏，无需手动关闭或点击外部。

内容的提问来源于stack exchange，提问作者Developer