Reputation: 3530
I have a HoverMenu component within my Nuxt 3 or Vue 3 application which displays some information on the hover of the mouse. For this, I am using the Popover
from @headlessui/vue
.
Everything works perfectly only problem is that the hover tooltip is displayed below the field rather I want it to be displayed above, is there any possibility to do this? I looked into the headless UI documentation on PopOver
but could not find anything there:
enter link description here
I am trying to achieve something like this as they are changing the position as they want for displayed tooltip: enter link description here
Following is my Nuxt 3 composition API component:
<template>
<Popover v-slot="{ open, close }" class="h-0" placement="top">
<PopoverButton
@mouseover="(e) => hoverPopover(e, open)"
@mouseleave="closePopover(close)"
>
HOVER ME
</PopoverButton>
<PopoverPanel
class="fixed bg-gray-700 rounded-lg shadow-sm text-white px-3 py-2 text-sm font-normal inline-block origin-top ring-1 ring-black ring-opacity-5 focus:outline-none"
@mouseover.prevent="popoverHover = true"
@mouseleave.prevent="closePopover(close)"
>
<slot> HELLO FROM HOVER </slot>
</PopoverPanel>
</Popover>
</template>
<script setup>
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
const popoverHover = ref(false);
const popoverTimeout = ref();
const ontologyInfo = ref("");
//On hover show the tooltip with information
const hoverPopover = (e, open) => {
popoverHover.value = true;
if (!open) {
e.target.parentNode.click();
}
};
//On mouse leave close it
const closePopover = (close) => {
popoverHover.value = false;
if (popoverTimeout.value) clearTimeout(popoverTimeout.value);
popoverTimeout.value = setTimeout(() => {
if (!popoverHover.value) {
close();
}
}, 100);
};
</script>
Upvotes: 2
Views: 843