how to trigger popover button on "hover" event instead of "onClick" event.

[MAfzalKhan1997]

I'm new to tailwind CSS and using headless-ui/react for my Next Js project.
I want to open these navigation menus on hover but I couldn't find any solution please help me out for that.

[ScottJr]

Seconding this issue. Curious how this is accomplished.

[mibmol]

#425 (reply in thread)

[dawnofmidnight]

[NorseGaud]

Example?

[krishaamer]

Also have this issue. Currently it's a blocker to make headless UI ready for production.

[Chandler-Zhu]

I am having the same issue

[atymic]

Also and issue here. Would be great to support this.

[apholdings]

Same issues here! i resolved this issue by working on reactjs and making my own dropdown solution

[gastonfr24]

pero si es el solopython tio xd

[adherb]

Hey Guys,

The simplest way I found to achieve this is as follows:
firstly I set a state, for example:

const [isShowing, setIsShowing] = useState(false)

Then on the menu item that shows in the navbar I add the following to manage the hover events:

onMouseEnter={() => setIsShowing(true)}
onMouseLeave={() => setIsShowing(false)}

Finally, on the HeadlessUi Transition I add the show property and use the current state to trigger it. Also, you will need to add the hover event triggers to stop the flyout menu disappearing when hovering over it:

show={isShowing}
onMouseEnter={() => setIsShowing(true)}
onMouseLeave={() => setIsShowing(false)}

Hope this helps.

[robertseghedi]

Worked perfectly!

[theAdhocracy]

Have just tried this and, whilst it works well visually, be aware that it appears to break the accessibility features of the component. When hovering, aria-expanded remains false and the aria-controls attribute is completely removed. That includes when you use click/tap events (for these, aria-expanded is correctly updated, but aria-controls is still broken).

We tried manually reintroducing/controlling those ARIA attributes, but they get stripped out by the component. We settled for a different solution (detailed in my comment below).

[jimyuanzhou]

this is amazing solution! the only question I have is I I am wondering does it matter the the popvoer panel state is still open? I add the codes just under open state.... it works though

{navigation.categories.map((category, categoryIdx) => ( {({ open }) => ( <>

setIsShowing(true)} onMouseLeave={() => setIsShowing(false)} className={classNames( open ? "border-indigo-600 text-indigo-600" : "border-transparent text-gray-700 hover:text-gray-800", "relative z-10 flex items-center transition-colors ease-out duration-200 text-sm font-medium border-b-2 -mb-px pt-px" )}

[jimyuanzhou]

Have just tried this and, whilst it works well visually, be aware that it appears to break the accessibility features of the component. When hovering, aria-expanded remains false and the aria-controls attribute is completely removed. That includes when you use click/tap events (for these, aria-expanded is correctly updated, but aria-controls is still broken).

We tried manually reintroducing/controlling those ARIA attributes, but they get stripped out by the component. We settled for a different solution (detailed in my comment below).

hey there, so you mean screen reader will not be able to read if they hover?

[theAdhocracy]

@jimyuanzhou see my more detailed comment further down, but in short, yes. Not just screen readers, but many forms of assistive technology will get a poor experience, and not just on hover. It breaks click/touch events as well. Any non-visual users will likely struggle with this, unless you implement some of the additional workarounds detailed elsewhere in this thread.

[kisexu]

Also and issue here. Would be great to support this.

[theAdhocracy]

Adding another vote for supporting this, either natively or by exposing the underlying state more completely (it would be great to be able to directly set the state of the Popover).

The preferred solution above appears to have accessibility issues, breaking the component's ability to accurately control aria-controls and aria-expanded.

We have implemented a slightly hackier workaround that forces a click event to trigger when a user hovers. Here's the function we came up with:

 const [isShowing, setIsShowing] = React.useState(-1) // array position of open popover; -1 if all closed
 const [currentMenu, setCurrentMenu] = React.useState<HTMLElement | undefined>() // DOM node of the button used to open current popover; undefined if all closed

// Function: Tracks popover state and enables hover-to-open functionality
  const togglePopover = (event?: React.MouseEvent, index?: number) => {
    if (event && isShowing !== index) {
      // Open the targeted menu popover and removes focus
      const button = event.currentTarget.children[0] as HTMLElement
      button.click()
      button.blur()

      // Save the button (DOM node) so that it can be triggered again to close the menu in the future
      setCurrentMenu(button)
      setIsShowing(index ? index : 1)
    } else {
      // If a popover menu is open, close it and remove focus
      if (currentMenu !== undefined && isShowing !== index) {
        const previousButton = document.getElementById(
          (currentMenu as HTMLElement).id
        )
        previousButton?.blur()
        previousButton?.click()
      }

      // Reset menu state so that it can be immediately reopened
      // NB: IF statement prevents menus closing when moving cursor between button and panel
      if (isShowing !== index) {
        setCurrentMenu(undefined)
        setIsShowing(-1)
      }
    }
  }

(Note: parts of the above may be overkill depending on what you're trying to do. We have a list where each item can trigger a popover, which itself is positioned slightly away from the containing element, so we're having to account for mouse travel between two elements and tracking the state of which popover is currently open 😅 )

In order to ensure popovers close when a user clicks somewhere else on the screen, we have a second function:

// Function: Checks origin of click event (is it inside/outside header)
 const checkClickOrigin = (event: MouseEvent) => {
    const header = document.getElementById('header-nav')

    // Check whether the click originated from within the header; if so, do nothing; else reset popover state
    if (header?.contains(event.target as HTMLElement)) {
      return
    } else {
      setIsShowing(-1)
      setCurrentMenu(undefined)
    }
  }

React.useEffect(() => {
    window.addEventListener('click', (event) => checkClickOrigin(event))
    return () =>
      window.removeEventListener('click', (event) => checkClickOrigin(event))
  }, [])

And then the following event handlers on the Popover components themselves:

• On the <Popover>: onMouseEnter={(event: React.MouseEvent): void => { togglePopover(event, index) }}
• On the <Transition>: onMouseLeave={() => { togglePopover() }}
• We're also setting show={open} on the <Transition> (though I'm not 100% sure this is necessary)
• And we're also using onMouseEnter={() => togglePopover()} on any elements within the header container that are not Popover triggers (again, probably unnecessary for most use-cases, but we have a few list items which are just links, rather than Popovers).

This setup is a lot more complicated, and it does still have some small issues in terms of accurately tracking state, but it does preserve the accessibility of the components, and provides the same UX as native hover events would.

[robclancy]

Really weird that something like this needs these hacks. Should just be a simple option or open/close methods exposed.

[amoralesdesign]

Please, I need this

[nlap]

I found this, which seems to be a pretty good implementation: https://codesandbox.io/s/d8llw?file=/src/App.js

[SadeeMsr]

In case someone find this useful, I managed to make it work with a pretty similar approach as the link above, but avoiding useState(), useEffect() and unnecessary re-renders

// duration can be tweaked at convenience
const timeoutDuration = 120
export const PopoverMenu = ({ className, labelText, content }) => {
  const triggerRef = useRef()
  const timeOutRef = useRef()

  const handleEnter = (isOpen) => {
    clearTimeout(timeOutRef.current)
    !isOpen && triggerRef.current?.click()
  }

  const handleLeave = (isOpen) => {
    timeOutRef.current = setTimeout(() => {
      isOpen && triggerRef.current?.click()
    }, timeoutDuration)
  }

  return (
    <Popover className={cn("relative", className)}>
      {({ open }) => (
          <div 
              onMouseEnter={() => handleEnter(open)}
              onMouseLeave={() => handleLeave(open)}
          >
            <Popover.Button ref={triggerRef} >
              {labelText}
            </Popover.Button>
            <Transition
              as={Fragment}
              enter="transition ease-out duration-200"
              enterFrom="opacity-0 translate-y-1"
              enterTo="opacity-100 translate-y-0"
              leave="transition ease-in duration-150"
              leaveFrom="opacity-100 translate-y-0"
              leaveTo="opacity-0 translate-y-1"
            >
              <Popover.Panel className="absolute left-1/2 z-50 mt-3 -translate-x-1/2 transform px-4">
                 {content}
              </Popover.Panel>
            </Transition>
          </div>
        )
      }
    </Popover>
  )
}

Thanks a bunch...It's much simpler now!

[Crayon-ShinChan]

This method has a bug. When there is two PopoverMenu in the same page, and if hover from one quickly to another one. The next one will not pop up and the previous one will stay on the screen.

[mibmol]

@Crayon-ShinChan oh shit you're right. I believe it's bc on how popover are implemented (only one popover should be open at once). So basically the first open popover will be clicked twice, causing the second one to close automatically. No idea how to solve that LoL. It probably needs to add a Context.

[SalahAdDin]

Does it handle onClickOutside? Is it possible to use this component with custom CSS styles?

[Jon1VK]

I handled the bug that @Crayon-ShinChan mentioned like this:

const handleLeave = (isOpen: boolean) => {
  timeOutRef.current = setTimeout(() => {
    isOpen &&
      document.activeElement === triggerRef.current &&
      triggerRef.current?.click();
  }, timeoutDuration);
};

[jimyuanzhou]

has anyone solved the issues or any videos out there explain how to do it?

[theAdhocracy]

nlap's comment above seems to be the most robust solution right now

[jimyuanzhou]

yea, I am looking at the link nlap found, trying to understand the code now, why is useref and useeffect included? just so confused by the popover open state and mouseover event connection....any idea?

[mibmol]

Hi! Just added a more simple example in the above comment. Hope that helps :)

[jimyuanzhou]

so what is the best solution for this? anyone? I have hard time understanding the code from https://codesandbox.io/s/d8llw?file=/src/App.js

[andrewrosss]

A little off-topic, but it's conceptually adjacent to a hover-triggered popover, and Googling for "headlessui tooltip" lead me here as one of the top results, so I'm putting this here in case this helps someone.

---

I was in need of a tooltip component (I'm currently migrating from Chakra to Tailwind + Headless UI), and figured I could just re-purpose the Popover component in a similar fashion to what's being discussed in this thread.

Unfortunately, the lack of ability to externally control the Popover state, in addition to the whole button-click thing with Popover.Button proved to be too awkward.

In the end it was easier to just do it with Popper.js and Tailwind and create a simple tooltip replacement.

It ain't much, but it does the trick:

import type React from "react";
import type * as PopperJS from "@popperjs/core";
import { useCallback, useRef, useState } from "react";
import { usePopper } from "react-popper";

type TooltipProps = {
  label: React.ReactElement;
  placement?: PopperJS.Placement;
  enterDelay?: number;
  leaveDelay?: number;
} & React.HTMLAttributes<HTMLDivElement>;

export const Tooltip: React.FC<TooltipProps> = (props) => {
  const {
    children,
    label,
    enterDelay = 250,
    leaveDelay = 150,
    placement = "bottom",
  } = props;

  const [isOpen, setIsOpen] = useState(false);
  let [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(
    null
  );
  let [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
  let { styles, attributes } = usePopper(referenceElement, popperElement, {
    placement,
    modifiers: [{ name: "offset", options: { offset: [0, 4] } }],
  });

  let enterTimeout = useRef<NodeJS.Timeout>();
  let leaveTimeout = useRef<NodeJS.Timeout>();
  const handleMouseEnter = useCallback(() => {
    leaveTimeout.current && clearTimeout(leaveTimeout.current);
    enterTimeout.current = setTimeout(() => setIsOpen(true), enterDelay);
  }, [enterDelay]);
  const handleMouseLeave = useCallback(() => {
    enterTimeout.current && clearTimeout(enterTimeout.current);
    leaveTimeout.current = setTimeout(() => setIsOpen(false), leaveDelay);
  }, [leaveDelay]);

  return (
    <div>
      <div
        ref={setReferenceElement}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        className="relative"
      >
        {children}
      </div>

      <div
        ref={setPopperElement}
        style={styles.popper}
        {...attributes.popper}
        className={`transition-opacity ${isOpen ? "opacity-100" : "opacity-0"}`}
      >
        {label}
      </div>
    </div>
  );
};

Example usage could be something like:

<Tooltip
  label={
    <span className="flex items-center bg-slate-700 text-white text-sm font-medium py-1 px-2 rounded-sm shadow-md">
      This is some helpful text
    </span>
  }
>
  <span>I have a tooltip!</span>
</Tooltip>

Count this as a +1 for the ability to have more fine-grained control over the Popover state.

[jimyuanzhou]

wow thanks!! let me digesting the code line by line now:)

[enkhee]

Thanks, but the style doesn't work

[sbusso]

Found the thread searching for tooltip on google, you deserve a medal 🏅

[amehito]

Support trigger both by click & hover

import {Fragment, useRef, useState} from 'react'
import {Popover, Transition} from '@headlessui/react'
import Link from 'next/link'
import {useOnClickOutside} from '@/components/hooks'

export default function Example({data}) {
  const [isHover, setIsHover] = useState(false)
  const [isClick, setIsClick] = useState(false)
  const ref = useRef(null)
  const isShowing = isClick ||  isHover
  useOnClickOutside(ref, () => {
    setIsClick(false)
  })

  return (
    <Popover
      ref={ref}
      onMouseEnter={() => setIsHover(true)}
      onMouseLeave={() => {
        setIsHover(false)
      }}
      className='relative'
    >
      {({close, open}) => (
        <>
          <Popover.Button onClick={() => setIsClick(true)}>
            <span className='px-4 '>{data.label}</span>
          </Popover.Button>

          <Transition
            show={isClick ? open : isShowing}
            as={Fragment}
          >
          ... // Panel code
          </Transition>
        </>
      )}
    </Popover>
  )
}

// useOnClickOutsideHook here ⬇️

export function useOnClickOutside<T extends HTMLDivElement>(ref: React.RefObject<T>, handler: (e: any) => void) {
  useEffect(() => {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const listener = (event: any) => {
      if (!ref.current || ref.current.contains(event.target as Node)) {
        return
      }
      handler(event)
    }

    document.addEventListener('mousedown', listener)
    document.addEventListener('touchstart', listener)

    return () => {
      document.removeEventListener('mousedown', listener)
      document.removeEventListener('touchstart', listener)
    }
  }, [ref, handler])
}

[kevinlens]

I found this example to be the most clear solution.
https://codesandbox.io/s/q558p?file=/src/App.js:563-639

[GBerghoff]

deadlink =(

[dinhanhthi]

https://codesandbox.io/s/q558p

[raihan-ramadhan]

https://codesandbox.io/s/q558p

thanks, this is the best for me

[mibmol]

I think there's no need to use isClick & isHover states
See this example: #425 (reply in thread)

[taythebot]

Solution for Vue

Here's an example using mouseover and mouseleave events on the PopoverButton and PopoverPanel.

• Event mouseover on PopoverButton, uses event.target.click() to open popover panel and sets popoverHover = true
• Event mouseleave on PopoverButton sets popoverHover = false and starts a 100 millisecond delay. Afterwards it checks if popoverHover === false before using close prop to close the popover
• If your mouse hovers inside PopverPanel before the 100 millisecond delay, it sets popoverHoever = true cancelling the close

You can adjust the delay to your liking. I found 100 milliseconds to be a good match for me.

If you have multiple popovers on your page, consider putting the below into a component with props to pass the text.

<template>
  <div class="fixed top-16 w-full max-w-sm px-4">
    <Popover v-slot="{ open, close }" class="relative">
      <PopoverButton
        :class="open ? '' : 'text-opacity-90'"
        class="group inline-flex items-center rounded-mdpx-3 py-2 text-base font-medium text-white hover:text-opacity-100"
        @mouseover="(e) => hoverPopover(e, open)"
        @mouseleave="closePopover(close)"
      >
        <span>Solutions</span>
        <ChevronDownIcon
          :class="open ? '' : 'text-opacity-70'"
          class="ml-2 h-5 w-5 text-white transition duration-150 ease-in-out group-hover:text-opacity-80"
          aria-hidden="true"
        />
      </PopoverButton>

      <transition
        enter-active-class="transition duration-200 ease-out"
        enter-from-class="translate-y-1 opacity-0"
        enter-to-class="translate-y-0 opacity-100"
        leave-active-class="transition duration-150 ease-in"
        leave-from-class="translate-y-0 opacity-100"
        leave-to-class="translate-y-1 opacity-0"
      >
        <PopoverPanel
          class="absolute left-1/2 z-10 mt-3 w-screen max-w-sm -translate-x-1/2 transform px-4 sm:px-0 lg:max-w-3xl"
          @mouseover.prevent="popoverHover = true"
          @mouseleave.prevent="closePopover(close)"
        >
          <div
            class="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5"
          >
            <div class="relative grid gap-8 bg-white p-7 lg:grid-cols-2">
              <a
                class="-m-3 flex items-center rounded-lg p-2 transition duration-150 ease-in-out hover:bg-gray-50"
              >
                <div class="ml-4">
                  <p class="text-sm font-medium text-gray-900">foo</p>
                  <p class="text-sm text-gray-500">bar</p>
                </div>
              </a>
            </div>
          </div>
        </PopoverPanel>
      </transition>
    </Popover>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
import { ChevronDownIcon } from '@heroicons/vue/20/solid'

const popoverHover = ref(false)
const popoverTimeout = ref(null)

const hoverPopover = (e, open) => {
  popoverHover.value = true
  if (!open) e.target.click()
}

const closePopover = (close) => {
  popoverHover.value = false
  if (popoverTimeout.value) clearTimeout(popoverHover.value)
  popoverTimeout.value = setTimeout(() => {
    if (!popoverHover.value) close()
  }, 100)
}
</script>

[TorchSK]

This works ok, unless you have a link instead of span inside PopoverButton. With link, every hover triggers the link and navigation

[sunscreem]

@taythebot Thanks for sharing this. Works a treat.

[guugg]

Occasionally I get an error when I move the mouse quickly.
The code has not changed

Uncaught TypeError: e.target.click is not a function
    at Proxy.hoverPopover (Z-Menu.vue:61:25)
    at onMouseover (Z-Menu.vue:7:30)
    at onMouseover (render.js:4:741)
    at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:17)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js:278:5)

[lunny]

But it doesn't work when you have multiple menus.

[mikoca]

Almost works fine, but I have error sometime when I hover on menu item or when I hover on arrow/icon (ChevronDownIcon) near menu item. I have this error:
ncaught TypeError: e.target.click is not a function
at Proxy.hoverPopover (Z-Menu.vue:61:25)
at onMouseover (Z-Menu.vue:7:30)
at onMouseover (render.js:4:741)
at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:17)
at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js:278:5)

[Trystanr]

Using the state method described above, I'd like to suggest you append some functions to support keyboard usage.

Along with

onMouseEnter={() => setIsShowing(true)}
onMouseLeave={() => setIsShowing(false)}

add

onFocus={() => setIsShowing(true)}
onBlur={() => setIsShowing(false)}

[hp8wvvvgnj6asjm7]

This should work:

                <Popover className="relative">
                    <Popover.Button className='focus:outline-none max-lg:ml-1 lg:ml-2 flex items-center justify-center h-16 max-sm:h-12 text-gray-700'>
                        <div onMouseEnter={() => $state(true)} onMouseLeave={() => $state(false)} className='flex rounded-md p-2 h-8 max-sm:p-1 justify-center items-center active:button-active hover:button-hover'>
                            <svg className='text-gray-400 md:hidden max-sm:h-4 h-5' xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
                            <div className='max-md:hidden uppercase text-xs font-semibold tracking-wider'>Account</div>
                        </div>
                    </Popover.Button>

                    <Transition show={state} as={Fragment} enter="transition ease-out duration-200" enterFrom="opacity-0 translate-y-1" enterTo="opacity-100 translate-y-0" leave="transition ease-in duration-150" leaveFrom="opacity-100 translate-y-0" leaveTo="opacity-0 translate-y-1">
                        <Popover.Panel className="absolute z-10 flex w-screen max-w-min -mt-3 -left-7 -translate-x-1/2 px-4">
                            <div className="w-60 shrink rounded-md bg-white p-4 text-sm uppercase font-semibold text-xs leading-6 text-gray-500 shadow-lg ring-1 ring-gray-900/5">
                                        <span>Log Out</span>
                                    </div>
                                </a>
                            </div>
                        </Popover.Panel>
                    </Transition>
                </Popover>

[aelfannir]

I found this

https://codesandbox.io/s/headless-ui-popover-with-hover-q558p?file=/src/App.js

[Crayon-ShinChan]

I did popover by pure Tailwindcss like this in Next.js

function QRCode({ QRCodeSrc }: { QRCodeSrc: string }) {
  return (
    <div className="relative hover:cursor-pointer group">
      <QrCodeIcon className="w-4 h-4" />
      <div className="absolute hidden group-hover:block w-24 h-24 bottom-5 -left-9 z-50 rounded-lg bg-white shadow-md shadow-gray-200 dark:shadow-gray-600">
        <Image src={QRCodeSrc} alt="QR Code" fill className="p-2" />
      </div>
    </div>
  );
}

It will show you something like this when you hover the QR code icon:

The basic idea is to hide the popover content first by hidden, then show them by group-hover, which makes it possible to override hidden to block when you hover the icon.

If we decide to use HeadlessUI Popover, we may meet this bug: #425 (reply in thread)

So maybe you can just use pure TailwindCSS

[hatchli]

Thanks for this.

For some reason I was convinced that this was a tough issue that required a built solution. I wish I would have stuck to my gut (as you likely did) and tried first the simple and obvious way. Bonus was I could get rid of the javascript.

[thclark]

Very much seconding this. At a higher level, what we actually want is the ability to have a PopoverPanel without necessarily also having a PopoverButton - i.e. have a headless solution for creating a popover which doesn't assume the (admittedly most common) pattern that it's opened by a button click.

This would allow much more versatile usage and avoid all the programatic button-clicking going on in the workarounds above.

[connecteev]

+1

Another vote on supporting this hover behavior natively in headlessUI. This is what I am trying to accomplish using headlessUI and tailwindcss:

threads_mega_menu_hover.mov

[tiwka19]

+1

Another vote on supporting this hover behavior natively in headlessUI. This is what I am trying to accomplish using headlessUI and tailwindcss:
threads_mega_menu_hover.mov

did you get it?

[RalkB]

Here's my approach to handle hover with a popover button:

<Popover className="relative inline-block select-none ml-10 mr-10">
  <Popover.Button
    onClick={(event) => handlePopoverClick(event)}
    onMouseEnter={(ref) => handlePopoverEnter(ref)}
    onMouseOut={(ref) => handlePopoverOut(ref)}
    dataActive="false"
  >
    Your Button Content
  </Popover.Button>
  <Popover.Panel className="absolute z-10 left-1/2 transform -translate-x-1/2 bottom">
    <div className="bg-white dark-bg-neutral-900 p-4 border border-neutral-700 rounded-2xl min-w-[300px]">
      <div className="text-xs">
        <div>
          <span>Details: [Your custom details here]</span>
        </div>
        <div>
          <span>Time: [Your custom time here]</span>
        </div>
      </div>
    </div>
  </Popover.Panel>
</Popover>

export function handlePopoverEnter(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
    const buttonRef = event.target as HTMLButtonElement;
    if (buttonRef) buttonRef.click();
};

export function handlePopoverOut(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
    const buttonRef = event.target as HTMLButtonElement;
    if (buttonRef) {
      const isActive = buttonRef.getAttribute('data-active') === 'true';
      if (isActive) buttonRef.click();
    }
}

export function handlePopoverClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
  const buttonRef = event.currentTarget as HTMLButtonElement;
  if (buttonRef) {
    const isActive = buttonRef.getAttribute('data-active') === 'true';
    buttonRef.setAttribute('data-active', isActive ? 'false' : 'true');
  }
}

[tiwka19]

popover closes as soon as I move the cursor away from the button. I don't even have time to hover over popover.content

[RalkB]

That's true; I used it just to display information on hover of the button, as for my use case, I didn't need the user to interact with the popover content.

[kalaschnik]

I am trying to build a Navbar with the Menu component. It seems all solutions provided here or in the feature request, are not working great when having multiple items. I created a minimal Navbar demo here (with nested and unnested entries): https://codesandbox.io/s/headlessui-menu-forked-y5q9hm?file=/src/App.js

As of now, is there any unbloated version out there that works reliably?
PS I also created a SO question for this: https://stackoverflow.com/questions/77446578/hover-on-headlessui-menu-element-to-open-instead-of-click

[rwchampin]

This post on Medium shows how to do this. Toggle NextUI Dropdown on Hover

[kalaschnik]

This is the NextUI library and not headless UI

[7Doyo]

Hint
For those who stumble on this problem on Vue, here is how I solve it.

create separate component for PopoverButton, i.e. CustomPopoverButton

<script setup>
import { ref } from "vue";
import { PopoverButton } from "@headlessui/vue";

const element = ref(null);

const handlePopoverButtonClick = () => {
    element.value?.el.click();
};
</script>
<template>
    <PopoverButton ref="element">
        <slot v-bind:handlePopoverButtonClick="handlePopoverButtonClick" />
    </PopoverButton>
</template>

and use it like this

<script setup>

import { ref } from "vue";
import { Link } from "@inertiajs/vue3";
import { Popover, PopoverGroup, PopoverPanel } from "@headlessui/vue";
 
import CustomPopoverButton from '@/Components/CustomPopoverButton.vue';

defineProps({
    navigation: [Object],
});

const popoverHover = ref(false);
const popoverTimeout = ref(null);

const hoverPopover = (e, open) => {
    e.preventDefault();
    popoverHover.value = true;
    if (!open) e.target.click();
};

const closePopover = (close) => {
    popoverHover.value = false;
    if (popoverTimeout.value) clearTimeout(popoverHover.value);
    popoverTimeout.value = setTimeout(() => {
        if (!popoverHover.value) close();
    }, 100);
};

const handelParentHoverPopover = (e, callback) => {
    e.preventDefault();
    callback();
};
</script>
<template>
    <div class="...">
        <PopoverGroup class="...">
            <div class="...">
                <Popover
                    v-for="menu in navigation"
                    :key="menu.id"
                    class="..."
                    v-slot="{ open, close }"
                >
                    <CustomPopoverButton
                        @mouseover.self="(e) => hoverPopover(e, open)"
                        @mouseleave.self="closePopover(close)"
                        :key="menu.id"
                        v-slot="{ handlePopoverButtonClick }"
                        :class="[open ? '...   ' : '...  ', '... ']"
                    >
                        <Link
                            :key="menu.id"
                            :href="route('page', { menu: menu.slug })"
                            @mouseover.self="(e) => handelParentHoverPopover(e,handlePopoverButtonClick)"
                            class="..."
                        >
                            {{ menu.title }}
                        </Link>
                    </CustomPopoverButton>

                    <transition
                        enter-active-class="transition ease-out duration-200"
                        enter-from-class="opacity-0"
                        enter-to-class="opacity-100"
                        leave-active-class="transition ease-in duration-150"
                        leave-from-class="opacity-100"
                        leave-to-class="opacity-0"
                    >
                        <PopoverPanel
                            @mouseover.prevent="popoverHover = true"
                            @mouseenter.prevent="popoverHover = true"
                            @mouseleave.prevent="closePopover(close)"
                            v-show="open"
                            class="..."
                        >
                            <div class="bg-white">...</div>
                        </PopoverPanel>
                    </transition>
                </Popover>
            </div>
        </PopoverGroup>
    </div>
</template>

[SaidiAli]

I tried all solution but decided to use this amazing library instead;
https://ui.shadcn.com/docs/components/navigation-menu

[gereltod-g]

Can't believe such basic, obviously needed reason never implemented in 3 years.

[willemmulder]

Anything on this yet?

[SalahAdDin]

This package became unmaintained.

[rtconner]

?? I see commits to it

[Gus007-BR]

I'm a relatively new web developer and I'm about to give up on Next-UI. It seems to be full of little bugs and incomplete features like this. There's got to be something better out there. I cannot image people having to deal with this kind of endless non-sense to do the most basic things.

[kalaschnik]

This is the headless-ui issue board. Not Next-UI. Go with shadcn-ui and you will have a rally great time: https://ui.shadcn.com/docs/components/navigation-menu

[SalahAdDin]

This is the headless-ui issue board. Not Next-UI. Go with shadcn-ui and you will have a rally great time: https://ui.shadcn.com/docs/components/navigation-menu

@kalaschnik What's the difference between this and the radix component one?