Ambrose Liew

Popover.tsx

import React from "react";
export default function Popover() {
  const ref = React.useRef<HTMLDivElement>(null);
  const button = React.useRef<HTMLButtonElement>(null);
  React.useEffect(() => {
    // have to setAttribute manually because of TypeScript
    // not supporting popover attributes yet
    ref.current?.setAttribute("popover", "");
    button.current?.setAttribute("popovertarget", "popover");
  }, []);
  return (
    <div>
      <button ref={button}>Open popover</button>
      <div ref={ref} id="popover">
        Hello world
      </div>
    </div>
  );
}