Tooltip Directive: Programatically control tooltips individually and as a group to show/hide

[redfox05]

Describe the bug

A few issues:

1. Using the Tooltip directive, it does not allow you to how hide it programmatically. The show/hide functions exist within the component, but are not exposed higher up to allow use.
2. When the tooltip is triggered, if the tooltip is already showing on the component, it will generate a tooltip in the top left of the screen, and then does not go away.
3. If the tooltip is showing, and the user changes tabs or views, the tooltip still remains.

Sadly it seems above issues are side effects from a workaround we have had to do to show/hide the tooltips. Using mouseenter/mouseleave events triggered on the related form field components.
The reason this is needed is because when form elements trigger validation issues, we show a tooltip on the error fields, and they have to display once the validation is triggered.

If you can suggest a better way to do this, please let me know.

Or if you can point me to your developer guidelines on how to extend your components, I will happily look into this and create a PR to submit. I have tried to look into the sourcecode but without documentation on how you do your dev, its taking a long time to figure out.

Reproducer

n/a

PrimeVue version

latest

Vue version

4.x

Language

ALL

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[github-actions]

Thanks a lot for this issue! PrimeVue team's roadmap is busy, but community feedback is crucial in prioritization. The more upvotes help ensure this fix can be addressed quickly or the related PR can be merged soon.

[fkdp06]

I have looked at the tooltip and I have one small issue, which I assume could be related to this topic.

Having hints as icons like that:

<fa-icon icon="fa-solid fa-circle-info" v-tooltip="'This is a hint.'"></fa-icon>

On mobile I would like to show tooltip on icon click (touch) as there is no mouse hover.
Is it possible?
So far I have tested the page on mobile and it is not working.
Is there any function I can use to show the tooltip?

For example:

<fa-icon icon="fa-solid fa-circle-info" v-tooltip="'This is a hint.'" @click="$tooltip.show()"></fa-icon>

or (similar to focus)

<fa-icon icon="fa-solid fa-circle-info" v-tooltip.click.top="'This is a hint.'"></fa-icon>