How to attach close function on dyanmic children button?

Question

I have a Tooltip component which is a wrapper for dynamic content.

I am trying to use it as a popup, which will have Delete and Cancel buttons.

I am passing the delete and cancel button as children prop, the problem is cus Close and Open state is in the Tooltip component.

I need to attach the close function on Cancel button which lives in Children prop.

Need help to find an elegant solution to this.

Tooltip component:

export const Tooltip: FC<TooltipProps> = ({
  content,
  helperText,
  children,
  ...props
}) => {
  const [visible, setVisible] = useState(false);

  const show = () => setVisible(true);
  const hide = () => setVisible(false);

  return (
    <div>
      <Tippy
        content={content}
        visible={visible}
        onClickOutside={hide}
        interactive
        {...props}
      >
        <div onClick={visible ? hide : show}>
        
          // =====>>> **Close button which be in children prop, need to attach hide() function**
          {children}

        </div>
      </Tippy>
    </div>
  );
};

This is Call of Tooltip component and passing buttons as Children:

 

 <Tooltip
     content={
       <div className="popover-buttons">
          
          // Need to attach here **hide()** function from Tooltip coomponent
          <button>
              Cancel
          </button>
          
           <button>
              Delete
           </button>
        </div>
 </Tooltip>

Answer 1

You can make the content prop passed to Tippy a component that has hide() function passed to it as a prop

export const Tooltip: FC<TooltipProps> = ({
  content: Content,
  helperText,
  children,
  ...props
}) => {
  const [visible, setVisible] = useState(false);

  const show = () => setVisible(true);
  const hide = () => setVisible(false);

  return (
    <div>
      <Tippy
        content={<Content hide={hide} />}
        visible={visible}
        onClickOutside={hide}
        interactive
        {...props}
      >
        <div onClick={visible ? hide : show}>
        
          // =====>>> **Close button which be in children prop, need to attach hide() function**
          {children}

        </div>
      </Tippy>
    </div>
  );
};

Then you have:

 <Tooltip
     content={ ({ hide }) =>
       <div className="popover-buttons">
          
          // Need to attach here **hide()** function from Tooltip coomponent
          <button onClick={hide}>
              Cancel
          </button>
          
           <button>
              Delete
           </button>
        </div>
 </Tooltip>