0

Whenever I add a tooltip to an SVG (using react-toolip), the tooltip shows twice: Here you can see the overlapped double tooltip

The Code:

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

While using the HelpIcon from @mui:

import HelpIcon from '@mui/icons-material/Help';
import ReactTooltip from 'react-tooltip';
stronglion3001
  • 63
  • 5

2 Answers2

1

You can use Material UI tooltip also Its easy to manage and also long text can be used easily

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

<Tooltip title='your tooltip title' >
   <HelpIcon>
</Tooltip>
Kamlesh sharma
  • 163
  • 7
0

To solve this, define the data-for attribute and the id for the regarding tooltip:

<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>
stronglion3001
  • 63
  • 5