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!

[mengxi-ream]

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 🏅

[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?

[babar0081]

Hello, guys i hope You All Are doing Well
,I am working on a personal project for Portfolio AnyOne can Please Help me who i can add hover effect on popover button i am using this popover component of headlessui tailwindcss
https://tailwindui.com/components/ecommerce/components/store-navigation
i have tired but its still not working proper can i can deal with it i need to use this navbar structure for my project m working on.

[nosovj]

I ran into this problem earlier today, and figured I would share my solution that seems to work fairly well (note, this is using Popover v2.1, so mileage may vary).

https://headlessui.com/react/popover#popover-button

The way I fixed this is by adding an observer to the popover in question, there are data attributes called data-hover and data-active.
If the data-hover attribute is added, and the data-active (popover active) has not yet been activated, then click on the popover button. This will allow you to trigger the popup on hover over of the button, and won't unintentionally close popover due to a onMouseLeave event.

I hope this helps!

   const popoverButtonRef = useRef<HTMLButtonElement>(null)

  useEffect(() => {
    const current = popoverButtonRef.current
    if (!current) {
      return
    }

    const observer = new MutationObserver((mutations) => {
      const hovered = mutations.find(({attributeName}) => attributeName === 'data-hover')
      const active = current.hasAttribute('data-active')

      if (hovered && !active) {
        current.click()
      }
    })

    observer.observe(current, {attributes: true})

    return () => {
      observer.disconnect()
    }
  }, [popoverButtonRef])

            <PopoverButton  ref={popoverButtonRef}>
              ...
            </PopoverButton>

[khatabwedaa]

Thanks for sharing @nosovj 🥇

[sstackus]

For anyone stumbling upon this, below is a solution after hours of investigating, looking into typings, aria etc. Unfortunately, as of v2.2.0 you're not going to find a way to tap into Popover's internal state, only to close() it.

Not sure if this is a less hacky solution than @nosovj 's MutationObserver. Triggering a click is dirty either way.

This is the approach via a render prop:

import { Popover } from '@headlessui/react';

function () {
 return (
    <Popover>
      {({ open, close }) => <PopoverHoverer isOpen={open} close={close} />
    </Popover
  );
}

import { PopoverButton, PopoverPanel, Transition } from '@headlessui/react';

const DEBOUNCE = 100;

function PopoverHoverer({ children, isOpen, close }: PropsWithChildren<{ isOpen: boolean; close: () => void }>) {
  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const buttonRef = useRef<HTMLButtonElement>(null);

  const clear = () => {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
  };

  const handleMouseEnter = () => {
    clear();
    if (!isOpen) {
      buttonRef.current?.click();
    }
  };

  const handleMouseLeave = () => {
    clear();

    timeoutRef.current = setTimeout(() => {
      close();
    }, DEBOUNCE);
  };

  useEffect(() => {
    return () => {
      clear();
    };
  }, [close]);

  return (
    <>
      {/* Ensure your custom component sets an `onClick` prop (even if it's a no-op function)
            otherwise `event.preventDefault()` will be called and default browser behaviour won't work
          @see https://github.com/tailwindlabs/headlessui/issues/3561 */}
      <PopoverButton
        as={MyLinkComponent}
        href="/"
        ref={buttonRef}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        My Link
      </PopoverButton>

      <Transition show={isOpen}>
        <PopoverPanel onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
          {children}
        </PopoverPanel>
      </Transition>
    </>
  );
}

---

Honestly, given all the search results on this issue out there, I think @RobinMalfait & team should reconsider the approach here and expose open(). So many collective hours wasted on such a pointlessly pedantic decision.

[sipec]

by the way, headless-ui already has as a dependency @floating-ui/react which can do hovering interactions. I find the syntax a bit clunky, but it is a good solution if you don't want to bundle another dependency just for hovercards & tooltips

[Fabioni]

How can this be still a problem. We just want an option onHover true/false.

[jimmailcamp]

Same! Bump guys