如何使 Antd 工具提示框悬停在其上方后消失？

Question

我们正在使用 Ant Design 项目的工具提示。我们希望这些工具提示在悬停后消失。

import React, { useState } from 'react';
import styled from 'styled-components';
import { Tooltip } from 'antd';
import Highlighter from 'react-highlight-words';

const TooltipText = ({
  children,
  className,
  tabIndex,
  fontSize,
  padding,
  highlightWord,
  style = { 'white-space': 'nowrap' },
  toolTipPlacement = 'top',
  clickable = true,
  onClick,
}) => {
  const [truncated, setTruncated] = useState(false);
  const updateOverflow = e => {
    const el = e.currentTarget;
    if (el.classList.contains('detail-location')) {
      const canvasContext = document.createElement('canvas').getContext('2d');
      if (
        Math.ceil(canvasContext.measureText(el.innerText).width) >
        2 * el.clientWidth
      )
        setTruncated(true);
    } else if (!truncated && el.scrollWidth > el.clientWidth) {
      setTruncated(true);
    }
  };
  return (
    <Tooltip
      title={truncated ? children : undefined}
      className={className}
      placement={toolTipPlacement}
    >
      <TextDiv
        onMouseEnter={updateOverflow}
        tabIndex={tabIndex}
        fontSize={fontSize}
        padding={padding}
        clickable={clickable}
        onClick={onClick}
        style={style}
      >
        <Highlighter
          textToHighlight={children || ''}
          searchWords={[highlightWord]}
          autoEscape
        />
      </TextDiv>
    </Tooltip>
  );
};

const TextDiv = styled.div`
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: ${props => props.fontSize || '0.69rem'};
  letter-spacing: 0;
  line-height: 1.06rem;
  padding: ${props => props.padding || '0'};
  & mark {
    background-color: rgba(255, 249, 0, 0.5);
    padding: 0;
  }
  &:hover {
    text-decoration: ${props => (props.clickable ? 'underline' : 'none')};
  }
`;

我使用了 CSS 属性“ant-tooltip-inner、ant-tooltip-arrow、ant-tooltip”，但它不起作用。我将“悬停”添加到 CSS 属性中，但它没有改变任何内容。在 chrome DevTools 中，我将“hover”属性放入 CSS 中，但它说它是未知属性。如果您提供建议，我将不胜感激。

Answer 1

您可以设置 mouseLeaveDelay=0 以立即隐藏工具提示。

<Tooltip mouseLeaveDelay={0}>Text</Tooltip>