Using component children

The current way to use a component children with tippy is to either use forwardRef or to wrap the component in a span tag.

However, I was wondering if by any chance there was another way to make it work ?

I just updated to the latest version of tippy and putting forwardRef everywhere is not maintainable. I would like to keep the accessibility so the span is also a problem (and it break the design sometimes as well). I don’t use styled components either.

[Arkellys]

Oh ok I see, thank you for the explanation, this change is understandable then! Yes I meant a class component, I have just tried your solution and it work well!

Thank you for your help, and for this great library. 😃

[sidx1024]

I don’t like these solutions where you need to use forwardRef and make things complicated. So I’ve made a wrapper that gets the reference to your DOM element by sibling reference. Sharing it here:

/**
 * A tooltip component which does not wrap the child component in a <span> element and does not require to passing a forwardRef.
 * It gets the child's reference by inserting an adjacent element.
 * This adjacent element is removed from the DOM when the sibling's ref is available.
 *
 * @param options
 * @param children
 * @returns {JSX.Element}
 * @constructor
 */
export function Tooltip({ options, children }) {
  /**
   * Reference for the temporary span element.
   */
  const spanRef = useRef(null);
  const [childRef, setChildRef] = useState(null);

  /**
   * Mount the temporary span element.
   * retrieve and store the target element's reference.
   */
  useEffect(() => {
    if (spanRef.current) {
      setChildRef(spanRef.current.previousElementSibling);
    }
    return () => setChildRef(null);
  }, []);

  return (
    <React.Fragment>
      {children}
      {childRef ? (
        <Tippy {...options} reference={childRef} />
      ) : (
        <span ref={spanRef} style={{ display: "none" }} />
      )}
    </React.Fragment>
  );
}

Tooltip.propTypes = {
  options: PropTypes.object,
  /**
   * Custom PropType to check for a single child.
   */
  children: (props, propName, componentName) => {
    const prop = props[propName];
    if (React.Children.count(prop) > 1) {
      return new Error(`${componentName} cannot have multiple children.`);
    }
    if (!React.isValidElement(prop)) {
      return new Error(`${componentName} has a child which is not a DOM element.`);
    }
  },
};

Tooltip.defaultProps = {
  options: {},
  children: null,
};

// Usage
function MyComponent() {
  return (
    <Tooltip content="Click to submit">
      <Button>Submit</Button>
    </Tooltip>
  );
}

The only thing you need to make sure is to have only one child component inside <Tooltip> to make it work.