I'm trying to implement a tooltip component using PrimeVue.Popover, but when I use Popover.prototype.show(event) in the callback of setTimeout, it crashes...
Here's a minimal example with that illustrates the problem:
const {createApp, ref, nextTick } = Vue;
const App = createApp({
template: '#app-template',
components: {
'p-button': PrimeVue.Button,
'p-popover': PrimeVue.Popover,
},
props: {},
setup(props) {
const tooltip = ref();
const delay = 500; // milliseconds
let timeoutID = null;
const openTooltip = (event) => {
closeTooltip();
timeoutID = setTimeout(() => tooltip.value.show(event), delay);
};
const closeTooltip = () => {
if (timeoutID != null) {
clearTimeout(timeoutID);
timeoutID = null;
tooltip.value.hide();
}
};
return { tooltip, closeTooltip, openTooltip };
},
},{ /* App setup props */ });
App.use(PrimeVue.Config, { theme: { preset: PrimeUIX.Themes.Nora } });
App.mount('#app-container');<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/primevue/umd/primevue.min.js"></script>
<script src="https://unpkg.com/@primeuix/themes/umd/Nora.js"></script>
<body style="margin: 1rem; background: #DDD;">
<div id="app-container"></div>
<template id="app-template">
<p-button
@pointerenter="openTooltip"
@pointerleave="closeTooltip"
>Hover me 0.5 seconds!</p-button>
<p-popover ref="tooltip">
<div style="white-space: preserve nowrap;">Tooltip content</div>
</p-popover>
</template>
</body>remark: My example uses Vue's Composition API and runtime CDNs so you should able to "play" with it quite easily.
If I replace:
timeoutID = setTimeout(() => tooltip.value.show(event), delay);
With:
timeoutID = 'XXX';
tooltip.value.show(event); // or: nextTick(() => tooltip.value.show(event));
Then the tooltip shows, but without any delay; which isn't what I want to achieve...
What's happening? How do I fix it?
openTooltipwon't be triggered twice for the same element when the mouse is hover it.