Open Tab Panel on hover of the associated Tab

[thomasbritton]

Hi,

I am wondering if there is a way to activate the associated tab panel by hovering on the tab button?

I have tried the following onMouseEnter/Leave but no luck:

<Transition
        as={Fragment}
        enter="transition ease-out duration-500"
        enterFrom="opacity-0 translate-y-1"
        enterTo="opacity-100 -translate-y-2"
        leave="transition ease-in duration-150"
        leaveFrom="opacity-100 translate-y-0"
        leaveTo="opacity-0 translate-y-1"
        show={isShowing}
        onMouseEnter={() => setIsShowing(true)}
        onMouseLeave={() => setIsShowing(false)}
      >
        <Menu.Items className="absolute left-0 top-8 mt-2 w-screen max-w-2xl origin-top-right divide-y divide-gray-100 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border-1 border-gray-400">
          <div className="relative w-full">
            <Tab.Group vertical>
              <div className="flex items-start">
                <div className="pr-5 inline-grid">
                  <Tab.List>
                    {item.items.map((item) => (
                      <Tab
                        key={item.id}
                        className="relative whitespace-nowrap py-3 pl-6 pr-32 w-full flex hover:bg-gray-200 border-r border-gray-100"
                        onMouseEnter={() => setTabsShowing(true)}
                        onMouseLeave={() => setTabsShowing(false)}
                      >
                        <Link to={item.to}>{item.title}</Link>

                        <ChevronRightIcon
                          className="absolute right-3 ml-1 -mr-1 mt-1 h-3 w-3 text-dark hover:text-violet-100"
                          aria-hidden="true"
                        />
                      </Tab>
                    ))}
                  </Tab.List>
                </div>

                <div className="pr-20 inline-grid">
                  <Tab.Panels>
                    {item.items.map((item) => (
                      <Tab.Panel
                        key={item.id}
                        className="grid grid-cols-2 gap-4"
                        show={tabsShowing}
                        onMouseEnter={() => setTabsShowing(true)}
                        onMouseLeave={() => setTabsShowing(false)}
                      >
                        <div className="inline-grid pt-3 pr-20">
                          {item.items.map((item) => (
                            <Link
                              key={item.id}
                              className="whitespace-nowrap py-2"
                              to={item.to}
                            >
                              {item.title}
                            </Link>
                          ))}
                        </div>

                        <div className="inline-grid">
                          ...
                        </div>
                      </Tab.Panel>
                    ))}
                  </Tab.Panels>
                </div>
              </div>
            </Tab.Group>
          </div>
        </Menu.Items>
      </Transition>