CODEWITHSUNDEEP
reactjsmaterial-uireact-tooltip
stronglion3001
stronglion3001

Reputation: 63

React-tooltip displays twice when using MUI icon

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';

Upvotes: 0

Views: 1116

Answers (2)

stronglion3001
stronglion3001

Reputation: 63

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>

Upvotes: 0

Kamlesh sharma
Kamlesh sharma

Reputation: 183

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>

Upvotes: 1

Related Questions