Skip to content

o-tooltip's imperative interface could accept an HTMLElement node #1609

@aendra-rininsland

Description

@aendra-rininsland

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status

    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions