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

MAfzalKhan1997 · 2021-04-22T08:27:55Z

MAfzalKhan1997
Apr 22, 2021

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 · 2021-04-27T07:44:34Z

ScottJr
Apr 27, 2021

Seconding this issue. Curious how this is accomplished.

1 reply

mibmol Mar 23, 2023

#425 (reply in thread)

dawnofmidnight · 2021-04-28T00:14:53Z

dawnofmidnight
Apr 28, 2021

1 reply

NorseGaud Oct 6, 2021

Example?

krishaamer · 2021-05-04T05:08:43Z

krishaamer
May 4, 2021

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

0 replies

Chandler-Zhu · 2021-06-03T14:23:29Z

Chandler-Zhu
Jun 3, 2021

I am having the same issue

0 replies

atymic · 2021-08-17T22:42:49Z

atymic
Aug 17, 2021

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

0 replies

apholdings · 2021-10-04T20:30:53Z

apholdings
Oct 4, 2021

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

1 reply

gastonfr24 Aug 7, 2023

pero si es el solopython tio xd

adherb · 2021-12-10T05:33:43Z

adherb
Dec 10, 2021

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.

7 replies

robertseghedi Jul 2, 2022

Worked perfectly!

theAdhocracy Jul 14, 2022

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 Aug 19, 2022

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 Aug 19, 2022

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 Aug 19, 2022

@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 · 2022-01-05T04:05:16Z

kisexu
Jan 5, 2022

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

0 replies

theAdhocracy · 2022-07-14T14:26:57Z

theAdhocracy
Jul 14, 2022

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.

1 reply

robclancy Nov 10, 2022

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

amoralesdesign · 2022-07-15T07:12:44Z

amoralesdesign
Jul 15, 2022

Please, I need this

0 replies

nlap · 2022-08-01T01:05:24Z

nlap
Aug 1, 2022

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

8 replies

SadeeMsr Mar 21, 2023

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 Aug 17, 2023

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 Aug 18, 2023

@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 Nov 8, 2023

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

Jon1VK Feb 15, 2024

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 · 2022-08-19T00:32:27Z

jimyuanzhou
Aug 19, 2022

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

3 replies

theAdhocracy Aug 19, 2022

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

jimyuanzhou Aug 23, 2022

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 Feb 27, 2023

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

jimyuanzhou · 2022-08-23T05:23:12Z

jimyuanzhou
Aug 23, 2022

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

0 replies

andrewrosss · 2022-08-26T05:41:59Z

andrewrosss
Aug 26, 2022

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.

3 replies

jimyuanzhou Aug 26, 2022

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

enkhee Nov 8, 2022

Thanks, but the style doesn't work

sbusso May 7, 2023

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

amehito · 2022-12-19T06:33:17Z

amehito
Dec 19, 2022

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])
}

5 replies

kevinlens Dec 24, 2022

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

GBerghoff Feb 14, 2023

deadlink =(

dinhanhthi Mar 17, 2023

https://codesandbox.io/s/q558p

raihan-ramadhan Mar 19, 2023

https://codesandbox.io/s/q558p

thanks, this is the best for me

mibmol Mar 23, 2023

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

aelfannir · 2023-08-18T15:50:52Z

aelfannir
Aug 18, 2023

I found this

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

0 replies

mengxi-ream · 2023-08-18T18:47:43Z

mengxi-ream
Aug 18, 2023

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

1 reply

hatchli Sep 8, 2023

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 · 2023-09-19T12:32:51Z

thclark
Sep 19, 2023

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.

0 replies

connecteev · 2023-09-21T00:51:56Z

connecteev
Sep 21, 2023

+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

1 reply

tiwka19 Nov 3, 2023

+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 · 2023-10-26T00:09:20Z

RalkB
Oct 26, 2023

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');
  }
}

2 replies

tiwka19 Nov 3, 2023

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 Nov 4, 2023

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 · 2023-11-08T15:41:25Z

kalaschnik
Nov 8, 2023

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

0 replies

rwchampin · 2023-11-30T22:03:40Z

rwchampin
Nov 30, 2023

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

1 reply

kalaschnik Dec 1, 2023

This is the NextUI library and not headless UI

7Doyo · 2023-12-25T20:28:44Z

7Doyo
Dec 25, 2023

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>

0 replies

SaidiAli · 2024-03-18T21:40:23Z

SaidiAli
Mar 18, 2024

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

0 replies

gereltod-g · 2024-03-28T02:13:02Z

gereltod-g
Mar 28, 2024

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

0 replies

willemmulder · 2024-04-05T10:25:17Z

willemmulder
Apr 5, 2024

Anything on this yet?

2 replies

SalahAdDin Apr 5, 2024

This package became unmaintained.

rtconner Apr 27, 2024

?? I see commits to it

Gus007-BR · 2024-04-18T03:27:53Z

Gus007-BR
Apr 18, 2024

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.

2 replies

kalaschnik Apr 18, 2024

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 Apr 27, 2024

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 · 2024-06-08T11:42:48Z

babar0081
Jun 8, 2024

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.

0 replies

nosovj · 2024-07-11T20:22:00Z

nosovj
Jul 11, 2024

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>

1 reply

khatabwedaa Nov 17, 2024

Thanks for sharing @nosovj 🥇

sstackus · 2024-11-18T11:40:09Z

sstackus
Nov 18, 2024

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.

0 replies

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

Replies: 33 comments · 45 replies

Replies: 33 comments 45 replies