show/hide declarativly

[jon-coffey]

Hi

Our use case is to show the tippy as "error message balloon" and toggle visibility if reactive Form Control has errors.

Is it already possible to show/hide the tippy declarativly? I tried [isEnabled] but once disabled it doesn't restore the latest visibility status if re-enabled.

I thought about the following possible options: (the higher the better/cleaner IMHO)

• Having an additional >boolean< trigger (currently only the set of triggers from tippy.js are used
• Reacting on className changes to toggle a class on the overlay element

I also already played with [variation] but the whole tippy is then updated and doesn't allow for smooth transition.

Are there any other options how to it that I've might missed to accomplish the goal?

Thank you

[NetanelBasal]

You can use ViewChild to query the instance and call it manually.

[jon-coffey]

You are right. I used this too in other scenarios.

As the forms grow in size it would be a nice feature to have a declarative option. Also for dynamicaly rendered form controls this is sometimes neccessary. Kind of "isEnabled" but keeping track if the tippy was visible before visually hidden.

<button
      tippy="Boolean triggered Example"
      trigger="manual"
      [hideOnClick]="false"
      [showOnCreate]="true"
      [isVisible]="<condition-to-check>"
    >Show/Hide</button>

I would create a PR for it. I just want to check if this option is wanted anyways from your side.

[jon-coffey]

Additionally hide() also destroys the instance. For hiding/showing often this might cause performance issues (?). The idea is a temporary hide (with animation for sure).

[NetanelBasal]

You're welcome to suggest an option and open a PR

[jon-coffey]

After short POC my suggestion is to reuse isVisible as an input and then check on attribute changes. Also see PR: #61

Yes - It doesn't avoid the destroy but that's the most minimal and compatible way for now