const [visible, setVisible] = useState(false);
const handleMouseEnter = (e) => {
let clientWidth = e.currentTarget.clientWidth;
let scrollWidth = e.currentTarget.scrollWidth;
setVisible(scrollWidth > clientWidth);
}
const handleMouseOut = () => {
setVisible(false);
}
<Tooltip title='显示...后才有Tooltip内容' open={visible}>
<div
className='box'
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseOut}
>
<div className='ellipsis'>
内容内容内容内容内容内容内容内容内容
</div>
</div>
</Tooltip>
```javascript
.box {
width: 200px;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}