BATMAN_2008
BATMAN_2008

Reputation: 3530

Headless UI popover open to the top instead of default to the buttom

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

Answers (0)

Related Questions