Function TooltipWithRef

client/src/javascript/components/general/Tooltip.stories.tsx:506–533

()

export const WithRef: Story = {
  render: () => {
    const TooltipWithRef = () => {
      const tooltipRef = useRef<TooltipHandle>(null);

      return (
        <div style={{display: 'flex', gap: '20px'}}>
          <Tooltip
            ref={tooltipRef}
            content="Controlled via ref"
            position="top"
            onOpen={fn()}
            onClose={fn()}
            onMouseLeave={fn()}
          >
            <button style={{padding: '10px 20px'}}>Hover for tooltip</button>
          </Tooltip>
          <button
            style={{padding: '10px 20px'}}
            onClick={() => {
              if (tooltipRef.current) {
                tooltipRef.current.dismissTooltip(true);
              }
            }}
          >
            Dismiss tooltip
          </button>
        </div>
      );
    };

    return <TooltipWithRef />;
  },