如何使蚂蚁工具提示框在悬停后消失

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属性"蚂蚁工具提示内部，蚂蚁工具提示箭头，蚂蚁工具"，但它不起作用。我在CSS属性中添加了"悬停"，但它没有改变任何内容。在chrome DevTools中，我将"hover"属性放入CSS中，但它表示这是未知属性。如果你能给我建议，我将不胜感激。

Answer 1

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

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