Multiple instances of react-hint: how to use ReactHintFactory properly?

[howells]

I'm having great trouble using react-hint across multiple, individual components in my app.

If react-hint is included multiple times, I end up with multiple tooltips appears on every hover. I think it's because I'm setting up each instance using:

const ReactHint = ReactHintFactory(React)

and so ReactHint is using the same root but I don't understand how I can set up a new instance specific to the component in which it's embedded, if that makes sense?!

https://gist.github.com/howells/f7de166446d75537a0a50ab9de205ba4

this component, UserActions, can appear many many times within an component, so I need the hints to be scoped to just that instance of the component.

Any help much appreciated!

[slmgc]

Hi, let me try to help you out!
Usually, you don't need to include ReactHint in every component which uses tooltips, just include it once in a topmost container component:

<App>
     <ReactHint />
     <UserActions />
     <UserActions />
     <UserActions />
     ...
</App>

In case you absolutely need to define it in multiple places (strongly discouraged), you can re-define the attribute name for each instance, like this:

...
constructor(...args) {
  super(...args)
  this._hintId = 'data-rh-' + +new Date // some unique id
}
...
render() {
 return (
      <div className="UserActions">

        <ReactHint attribute={this._hintId} events delay={120} position={this.props.tooltipPosition} ref={(ref) => this.rhInstance = ref} />
      ...
}

[howells]

Ah - thInking I needed to add the component within multiple components is where I was going wrong - thanks so much for your help!

[slmgc]

@howells is there a way to make it more clear in the docs?

[howells]

@slmgc I think it's me just being a noob and now it's clear. I guess make it clear that the tooltip should only be instantiated once across the whole app and use the data attributes to configure

[gion]

I have a similar issue, but my use case is that I'm exporting a react component that uses react-hint. This component can be instantiated multiple times, meaning that it will create multiple instances of react hint... which is resulting in weird UX.

[slmgc]

@gion react-hint is not supposed to be instantiated multiple times, except when it's necessary in some edge-cases. It's not your regular component-wrapping tooltip. I guess you can still export a react component which uses react-hint, but react-hint should be imported and defined separately.