React-tooltip: Tooltip redering twice in two seperate positions

[tatsujb]

<div
                                                className="btn-greyed-out"
                                                data-tip={"Veuillez S'il vous plaît d'abords fournir des modifications au template "+ currentTemplate + "."}
                                            >
                                                <div><i className="fa fa-floppy-o" /> Sauvegarder en Template</div>
                                            </div>
                                            <ReactTooltip place="top" type="info" effect="solid" />

why is it doing this?

If I place it left or right it shows on the left in both of those case and not on top (also you'll notice the one on the left is darker making me think there's 2 or more showing on the left.

[Sedaj]

@tatsujb Check if you don't create <ReactTooltip /> within a loop, but outside

[canoqb10]

you must write "data-for" in your component and will reference with "id" to "data-for".
for example:

[urirahimi]

I'm getting this issue but I implemented data-for with a match the tooltip id

[cheriejw]

I had this issue with data-for and id as well, the solution for me was to set a more unique identifier/a combination of a word and a variable that I was getting from the parent component (i.e. id=`tooltip-${parent.id}`).

Heres the same issue.