react-popper-tooltip-hook

Experimenting with possible hook API for react-popper-tooltip.

Updated: Eventually it was released as react-popper-tooltip version 4.

Codesandbox.

const {
  arrowRef,
  tooltipRef,
  triggerRef,
  getArrowProps,
  getTooltipProps,
  setArrowRef,
  setTooltipRef,
  setTriggerRef,
  visible,
  ...popperProps
} = usePopperTooltip(config, popperOptions);

<>
  <button type="button" ref={setTriggerRef}>
    Reference element
  </button>

  {visible && (
    <div
      ref={setTooltipRef}
      {...getTooltipProps({ className: "tooltip-container" })}
    >
      Popper element
      <div
        ref={setArrowRef}
        {...getArrowProps({ className: "tooltip-arrow" })}
      />
    </div>
  )}
</>