-
Notifications
You must be signed in to change notification settings - Fork 15
Open
Description
One difficulty I often have with o-tooltip is that it requires an ID string for the target, which are often in short supply around React-land. Looking at the code, the imperative interface only uses the opt.target value to run a getElementById
to then pass on the returned node to the constructor.
Allowing opts.target to be an HTMLElement
allows for patterns like the following (in React pseudocode):
import React, { useEffect } from 'react';
import OTooltip from '@financial-times/o-tooltip';
const Tooltip = ({target, ...opts}) => {
const tooltip = useRef(null);
const el = useRef(null);
useEffect(() => {
tooltip.current = new OTooltip(el.current, {target, ...opts});
}, []);
return <div ref={el} />
}
...Where the target
prop is likely another ref
passed down from a parent element:
const ButtonWithTooltip = (props) => {
const ref = useRef(null);
return <>
<button ref={ref}>Some content to tooltip</button>
<Tooltip target={ref} {...props} />
</>
}
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Status
Backlog