Singleton trigger override

[omar-a-007]

I can't seem to properly override trigger for singleton instances.

Example (codesandbox)

In the above example, if you hover over the "bye" div, you'll see the tippy, which should only be triggered on click. It will stay there until you click somewhere, then it will only show up when you click the div. The initial behavior of displaying on hover is undesired.

Unfortunately, if I set the tippy source's trigger="manual" then the tippy will never show even on click.

--

Unrelated to the above but I added another Tippy with the content of "Why doesn't this work?". When I have it inside the Dropdown function, it works just fine, otherwise, nothing.

[atomiks]

I think it's because of the way triggers/event listeners work: since it's a singleton, it can't know "ahead" of time that the trigger has changed when you hover over a new target, etc.

Unrelated to the above but I added another Tippy with the content of "Why doesn't this work?". When I have it inside the Dropdown function, it works just fine, otherwise, nothing.

Check the console. You need to forward the ref to the HTML element the tippy will be attached to. Currently it's just being forward to a component which doesn't make sense to the lib

[omar-a-007]

I kind of had a feeling it had to do with being a singleton. Well that's fine. That example was a bit contrived and I managed to work around it already in my actual project (but thought it was still worth posting about) by using two singletons, one that fires on click and the other that fires on mouseenter.

Ah! Well that makes sense, its the same thing as the <ThisWillWork /> example you have on the homepage. Silly me. Thanks a bunch!

[omar-a-007]

Unrelated to my original question; but I feel this is maybe better than opening a new issue.

How do I hide a tippy?

In particular, I have something to the effect of:

const Msg = ({...}) => {
  const [source, target] = useSingleton({overrides: ['visible', ....]})
  <Tippy singleton={source} interactive={true} trigger={click} />
  <Dropdown target={target} />
}

const Dropdown = forwardRef({...}, ref) => {
  const [visible, setVisible] = useState(true)
  const clickHandler = (param) => {
     setVisible(false) // Doesn't seem to do anything
    // .. some other action, which does trigger correctly //
  }

return(
  <Tippy target={target} content={
      <>
            <Item clickHandler={clickHandler} />
      </>      
   }>
    <span ref={ref}> Something Clickable </span>
   </Tippy>
)
}

const Item = ({clickHandler, ...}) =>
      <button onClick={clickHandler("Click Me")}>
            Click Me
      </button>

Of course, I'd much rather be able to just call instance.hide() x-x or something like <Tippy-HideAll />

edit Figured it out. The example on the homepage is slightly incorrect. <Tippy content="Tooltip" visible={visible} onClickOutside={hide}> should be <Tippy content="Tooltip" isVisible={visible} onClickOutside={hide}>