React-tooltip: Only one tooltip open at time.

[ferpintado]

I have a list of elements which each one has an anchor that launches the tooltip on click event.

Is there any way to have only one tooltip shown at any given time?

Thanks

[huumanoid]

I think the easiest way to achieve so is to have only one <ReactTooltip /> component corresponds to the whole list of elements. Tell me, what you think about it.

[ferpintado]

That might work! Thanks

[huumanoid]

Hey @ferpintado I'm assuming that this issue is fixed for you.
Please, let me know if I'm wrong.

[camiblanch]

This doesn't seem to work for me. I think it might be because I am showing the tooltips using ReactTooltip.show().

[camiblanch]

I was able to get it to work after adding data-for to the inputs I have the tooltips bound to and adding id to the ReactTooltip components that correspond with them. Hope that helps anyone else having the same problem as me!

[aronhelser]

Great - glad to hear you got it working.

On Tue, Apr 10, 2018 at 5:11 PM, Cami [e-mail] wrote:

I was able to get it to work after adding data-for to the inputs I have
the tooltips bound to and adding id to the ReactTooltip components that
correspond with them. Hope that helps anyone else having the same problem
as me!

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/wwayne/react-tooltip/issues/265#issuecomment-380247907,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AS_pnTkvt0qQlB6OIvhnxcsqMIOzKKOOks5tnR_ngaJpZM4ML2g3
.

[khalid3n]

I am trying to get my head around it. I have a form which has multiple fields and I have to show tooltips onClick for each one, but If I click one tooltip to show, and then click on another the previous one doesn't close. Is there any way to show only one tooltip at the same time?

here is my code. I have written a wrapper component
class Tooltip extends React.PureComponent { render() { const { text, children, position, event, effect, className, id, } = this.props; return [ <a data-tip data-for={id} data-event={event} data-place={position} data-multiline data-effect={effect} data-html className={className} // data-event-off="click" > {children} </a>, <ReactTooltip globalEventOff="click" // eventOff="click" multiline html id={id} className="tooltip--bubble" > {text} </ReactTooltip>, ]; } }

[aronhelser]

Yes, instead of including the ReactToolTip in this component, you keep it separate. There will be a single id, but each <a> should set data-tip={text}
HTH

[faeghe-hajiabadi]

Hi every one!
what about showing tooltips just one time for every user?
thank you for answering.

[anatel]

@aronhelser Would the solution you suggested to @khalid3n work if I use getContent?
then I can't use data-tip or data-html since I need to have a react component as the content.

[aronhelser]

I don't know....