CODEWITHSUNDEEP
reactjstailwind-css
Toan Lam
Toan Lam

Reputation: 139

how to show a hidden element on hover on tailwind

how would it be possible to display a hidden menu through a hover. im getting confused as to how a hidden element can be connected to a visible element. this example is on the headlessui website. however instead of clicking on it, would it be possible to hover to show the popover?

return (
  <div className='fixed w-full max-w-sm px-4 top-16'>
    <Popover className='relative'>
      {({ open }) => (
        <>
          <Popover.Button></Popover.Button>
          <Transition>
            <Popover.Panel className='absolute z-10 w-screen max-w-sm px-4 mt-3 transform -translate-x-1/2 left-1/2 sm:px-0 lg:max-w-3xl'></Popover.Panel>
          </Transition>
        </>
      )}
    </Popover>
  </div>
);

Upvotes: 2

Views: 4253

Answers (1)

Theodore MCA
Theodore MCA

Reputation: 1178

Try using the onMouse in Events

return (
  <div onMouseEnter={() => setOpen(true)}
        onMouseLeave={() => setOpen(false)}

className='fixed w-full max-w-sm px-4 top-16'>
    <Popover className='relative'>
      {({ open }) => (
        <>
          <Popover.Button></Popover.Button>
          <Transition>
            <Popover.Panel className='absolute z-10 w-screen max-w-sm px-4 mt-3 transform -translate-x-1/2 left-1/2 sm:px-0 lg:max-w-3xl'></Popover.Panel>
          </Transition>
        </>
      )}
    </Popover>
  </div>
);

Upvotes: 2

Related Questions