reactjs - 使用 MUI 图标时 React-tooltip 显示两次

Question

每当我向 SVG 添加工具提示（使用 react-toolip）时，工具提示都会显示两次：

编码：

<HelpIcon data-tip='This field represents all sales (or revenues) generated by the company.'></HelpIcon>
<ReactTooltip effect='solid' place='left' multiline={true}/>

在使用来自@mui 的 HelpIcon 时：

import HelpIcon from '@mui/icons-material/Help';
import ReactTooltip from 'react-tooltip';

Answer 1

您也可以使用 Material UI 工具提示 它易于管理，也可以轻松使用长文本

import { Tooltip } from '@mui/material';

<Tooltip title='your tooltip title' >
   <HelpIcon>
</Tooltip>

Answer 2

为了解决这个问题，定义 data-for 属性和相关工具提示的 id：

<div data-tip='This field represents all sales (or revenues) generated by the company.' data-for='questionMarkToolTip'>
    <HelpIcon></HelpIcon>
    <ReactTooltip effect='solid' place='left' multiline={true} id='questionMarkToolTip'/>
</div>