How to have "onClickOutside" ?

Hello here 👋

I have a specific use case where I want to display the Tippy component only on desktop views like following:

const defaultTippyProps: Omit<TippyProps, "content" | "children"> = {
  animation: "shift-away-subtle",
  arrow: true,
  interactive: true,
  trigger: "manual",
  interactiveBorder: 10,
  placement: "bottom-end",
  delay: [0, 0],
  duration: [200, 150],
  maxWidth: 500,
  appendTo: document.body,
  sticky: true,
  plugins: [sticky],
  boundary: "viewport",
  theme: "light",
  distance: 24,
  inertia: true,
}

const [showPopover, setShowPopover] = useState(false)
const open = () => setShowPopover(true)
const close = () => setShowPopover(false)

return isMobile ? (
    <>
      <MyMobileView content={content} visible={showPopover} .../>
    </>
  ) : (
    <Tippy
      content={content}
      {...defaultTippyProps}
      visible={showPopover}
      onHide={() => {
        close()
      }}
    >
      <span tabIndex={0} onClick={showPopover ? close : open}>
        {children}
      </span>
    </Tippy>
  )

The display of the tooltip depend on the showPopover state. Here are my needs:

• When I click outside of the Tippy component, it should call close() to update the state, it works using onHide/onHidden here
• When I resize the window, I should use MyMobileView so Tippy will be unmounted but I don’t want the state to be updated so it will display/open MyMobileView but using onHide/onHidden still update the state here

Ideally, I should use something like onClickOutside instead of onHide to handle my use case, do you see another way to do it with the current API?

Thanks by advance and feel free to ask if you need a PR or more informations 😃

[atomiks]

Released, and I’ve added an example to the docs. Do you think we should make hideOnClick: false default if we detect the visible prop?

[atomiks]

Are you able to make a CodeSandbox demo?