Tippyjs: Is it possible to conditionally render only the component?

[SensationSama]

I'm using tippyjs/react. Sometimes I only wish to render my component, and not the tooltip as well.

My solution seems like a bit of an anti-pattern:

{window.myVariable && <SomeComponent/>}
{!window.myVariable &&
<Tippy content={<div>hi</div>}>
    <SomeComponent/>
</Tippy>
}

I'm looking for something like an attribute I can attach to Tippy e.g.

<Tippy showTip={!window.myVariable} content={<div>hi</div>}>
    <SomeComponent/>
</Tippy>

Thanks

[atomiks]

Yeah there's a few ways:

1. Conditional rendering as you're doing currently

{window.myVariable ? (
  <SomeComponent />
) : (
  <Tippy content="Tooltip">
    <SomeComponent />
  </Tippy>
)}

1. Return false in onShow if you don't want to show it

const onShow = () => !window.myVariable

<Tippy onShow={onShow}>
  <SomeComponent />
</Tippy>

1. Call .enable() / .disable() imperatively on the instance

_I think there should be React-specific props for this however_: like isEnabled which is part of the state object. Maybe isVisible, too

[KubaJastrz]

I think this is a good idea to have a component prop that, if specified, takes control over tooltip visibility and can be modified by providing custom onShow, onHide method callbacks.

[SensationSama]

Thanks!

[SensationSama]

Does anyone know why this no longer works after updating?

<Tippy onShow={onShow}>
  <SomeComponent />
</Tippy>

I just updated to

"@tippy.js/react": "^2.2.0",
"tippy.js": "^3.1.3",

[atomiks]

@tippy.js/react@2 is dependent on tippy.js@4 (v4 major)
Also, there were breaking changes in v2 obviously, you can read the release notes to find out