How to do a clickable hover tooltip

[damianosz]

It keeps auto-hiding even with autoHide: false

[damianosz]

Not sure if is because in PopperWrapper.vue you use "auto-hide" instead of "autohide" when consuming

[Akryum]

It's auto-hide or autoHide in the template.

[damianosz]

Either way the v-tooltip always go away after a bit. They do not seem to respect autoHide false

[naaadz]

autohide false doesn't work on the demo page https://v-tooltip.netlify.app/theme-editor.html

[Akryum]

It works, read what autoHide does in the docs here: https://v-tooltip.netlify.app/api/#component-props

[naaadz]

In v2, this was the definition of autohide for the tooltip: Is there a way to get this working again? When set to false, it would allow the tooltip itself to be hovered and stay open until mouseleave of the tooltip. https://github.com/Akryum/v-tooltip

[damianosz]

@Akryum To be more precise, no longer respects autoHide: false like in the Vue 2 version. when using hover. But it does with click. We would like to make autoHide: false on hover as well.
I tried getting the Vue 3 source but I cannot seem to figure it out. I wonder if in the Vue 2 version you had a bit more code that still need to be carried over?

[Akryum]

When you use hover, it's normal for the tooltip to close on mouseout

[naaadz]

we use the autoHide:false option so we are able to hover over the tooltip itself if we need to copy text or click a link that's in the tooltip. Thats what is not working anymore.

[d-manevich]

Hi! Thanks for the great convenient tooltip!

Got the similar issue. I have a button with a dynamic tooltip that changes when button is clicked. This causes the tooltip to close.
To fix this, for vue 2 I used manual hover trigger and autoHide: false. But in v4 for vue 3 this doesn't help anymore

[Akryum]

autoHide is unrelated then. It's an option that closes the popper when clicked outside of it.

[Akryum]

Set the triggers like this: https://github.com/Akryum/v-tooltip/blob/1b987c7a9db84407c6c9055be67bc093c42398b8/packages/v-tooltip/src/config.js#L57-L58

[damianosz]

This actually ended up being what we needed! Thank you again, sorry I missed this earlier.

[NaMax66]

works for me also

[damianosz]

So how can we show on hover, and keep it from not hiding when user moves mouse inside tooltip to click on a link?

[damianosz]

If we use VDropdown for example and set :showTriggers to ['hover'] it does not close when you over on others, and also it does not stay open so you cannot con within its content to click the close button:

<VDropdown :offset="[0, 16]" :showTriggers="['hover']">
                        <!-- This will be the popover target (for the events and position) -->
                        <button class="tooltip-target b3">
                            Open me
                        </button>
                        <!-- This will be the content of the popover -->
                        <template #popper>
                            <p>
                                Some text
                            </p>

                            <button class="tooltip-target b3">
                                Close me
                            </button>
                        </template>
                    </VDropdown>

[Akryum]

Try adding :hideTriggers="[]"

[damianosz]

I ended up wrapping into a custom components with slots for target and content and just handling a shared state with reactive:

<VTooltip :offset="[0, 16]" :triggers="[]" :shown="internals.isOpen" :placement="placement" :disabled="disabled">
    .......
import popoverSharedState, { closeAllPopoversButThis } from './SharedState'
    .......

But the way worked in Vue 2 with just v-tooltip and autoHide false was very handy. Too bad.

[ArturBrzo]

@Akryum is this issue on a road map ?