Interactive QTooltip (Tooltips stays open when hovering)

[Quasarman]

Hello,

I am not sure if this is already possible since it seems to me that this is quite a common practice on other websites. Basically what I want to have is interactive tooltips. When hovering over e.g., a user Avatar, I get a tooltip showing more information about that user. Inside this tooltip is a follow button I want to click. To achieve this the tooltip obviously needs to stay open whenever the cursor is hovering over the open tooltip.

I tried the following to implement the described behavior:

. . .
<q-tooltip
    ref="Tooltip"
    v-model="showing"
    @before-hide="beforeHideTooltip"
    :hide-delay="500"
>
    <div
        @mouseenter="enterTooltip"
        @mouseleave="hideTooltip"
    >
        . . .
    </div>
</q-tooltip>

. . .

<script>
export default {
    data () {
        return {
            showing: false,
            mouseOverTooltip: false
        };
    },
    methods: {
        beforeHideTooltip () {
            if (this.mouseOverTooltip) {
                this.$refs.Tooltip.show();
            }
        },
        hideTooltip () {
            this.mouseOverTooltip = false;
            this.$refs.Tooltip.hide();
        },
        enterTooltip () {
            this.mouseOverTooltip = true;
        }
    }
};
</script>
. . .

While this implementation is kind of working its not perfect as the tooltip flickers whenever the mouse is hovering over it which does not look nice (Note: The flicker is more noticeable as it is shown in the GIF).

I know for a fact that this was not the case in previous Quasar versions (I am not sure which version was the last for this to work since I upgraded a few times before noticing the flickering) but it seems something has changed internally for this to no longer work.

Is there already a way to achieve what I am describing? If not I think having a simple interactive Boolean prop on the QTooltip component would be really beneficial to stop the tooltip disappearing when the mouse is hovering it.

Thanks for any feedback,
Johannes

[metalsadman]

try something like this https://codepen.io/metalsadman/pen/dyJqWOR

[Quasarman]

Thanks for your reply! Regarding your example I thought the hide-delay was excatly ment for this purpouse to not deal with some custom delay inside the method?

[Quasarman]

But its working just fine, thanks!