使用MUI图标时反应工具提示显示两次

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

您可以使用材料用户界面工具提示，它也易于管理，也可以很容易地使用长文本。

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

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

Answer 2

要解决这个问题，请定义data属性和有关工具提示的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>