我让GPT写了个命令式的antd的tooltip组件哈哈

场景

在做项目时，确实需要点击或鼠标移入某个元素来弹出提示框，但是又不能直接在元素外层包裹这个Tooltip标签。

1、控制显隐的方法

import ReactDOM from 'react-dom';
import { Tooltip, TooltipProps } from 'antd';

let hideCurrentTooltip: any = null;

export function showTooltip(
  event: any,
  { title = 'e44444444444', ...restProps }: TooltipProps
) {
  if (hideCurrentTooltip) {
    hideCurrentTooltip();
  }

  const target = event.target; // 获取事件触发的目标元素
  const rect = target.getBoundingClientRect(); // 获取目标元素的位置和尺寸

  const container = document.createElement('div');
  document.body.appendChild(container);

  // 根据目标元素的位置和尺寸设置Tooltip的位置
  // 这里我们简单地将Tooltip放在目标元素的下方
  container.style.position = 'absolute';
  container.style.left = `${rect.left + window.scrollX}px`; // 加上滚动偏移
  container.style.top = `${rect.top + window.scrollY}px`;
  container.style.width = `${rect.width}px`;
  container.style.height = `${rect.height}px`;

  const TooltipComponent = () => {
    function removeTooltip() {
      ReactDOM.unmountComponentAtNode(container);
      document.body.removeChild(container);
      hideCurrentTooltip = null;
    }

    hideCurrentTooltip = removeTooltip;
    return (
      <Tooltip open title={title} {...restProps}>
        <div style={{ width: rect.width, height: rect.height }}></div>
      </Tooltip>
    );
  };

  ReactDOM.render(<TooltipComponent />, container);
}

export function hideTooltip() {
  if (hideCurrentTooltip) {
    hideCurrentTooltip();
  }
}

2、调用

     <Button onClick={(e) => showTooltip(e, { title: "撒果然很瑟夫"})} >点击</Button>
     <Button onClick={(e) => showTooltip(e, {})}>点击</Button>
     <Button onClick={() => hideTooltip()}>隐藏</Button>

3、效果

1、

2、