Using your approach
How to use a tooltip in a reusable component which includes one tooltip without classNames collisions? (I mean, by reusable component, a component that you can use "as is" without having to declare a specific Tooltip in his parent container)
Using your example in a reusable component
Code: Select all
MyReusableComponent
<Tooltip target=".myDiv" />
<div className="myDiv" data-pr-tooltip="My Div 1" data-pr-position="left"/>
<div className="myDiv" data-pr-tooltip="My Div 2" data-pr-position="right" />
Calling multiple times
Code: Select all
<MyReusableComponent />
<MyReusableComponent />
<MyReusableComponent />
Will generate 3 different tooltip which focus the same class with UI issues (3 tooltips are opening when you mouse over only 1 element).
If you have to declare only one time the tooltip in the parent container, so you cannot create simple reusable components from my point of view.
EDIT :
2 first tooltip libraries on Google use the approach I describe
https://github.com/cedricdelpoux/react-simple-tooltip
https://github.com/react-component/tooltip
I'm still convinced using React and focusing elements using className/Id in containers components is a practice to avoid.