fix(ui): tooltip stays open on hover [EE-3445] (#8051)

app/react/sidebar/Sidebar.tsx

@@ -30,7 +30,7 @@ export function Sidebar() {
   return (
     /* in the future (when we remove r2a) this should wrap the whole app - to change root styles */
     <SidebarProvider>
-      <div className={clsx(styles.root, 'flex flex-col')}>
+      <div className={clsx(styles.root, 'sidebar flex flex-col')}>
         <UpgradeBEBanner />
         <nav
           className={clsx(

app/react/sidebar/SidebarItem/Head.tsx

@@ -5,10 +5,11 @@ import {
 } from '@uirouter/react';
 import clsx from 'clsx';
 import { ComponentProps } from 'react';
-import ReactTooltip from 'react-tooltip';
+import Tippy from '@tippyjs/react';
 
 import { AutomationTestingProps } from '@/types';
 
+import 'tippy.js/dist/tippy.css';
 import { Link } from '@@/Link';
 import { IconProps, Icon } from '@@/Icon';
 
@@ -40,7 +41,7 @@ export function Head({
     ignorePaths
   );
 
-  return (
+  const anchor = (
     <a
       href={anchorProps.href}
       onClick={anchorProps.onClick}
@@ -54,22 +55,30 @@ export function Head({
           'justify-center w-8': !isOpen,
         }
       )}
-      data-tip={label}
       data-cy={dataCy}
     >
       {!!icon && <Icon icon={icon} className={clsx('flex [&>svg]:w-4')} />}
       {isOpen && <span>{label}</span>}
-
-      <ReactTooltip
-        type="info"
-        place="right"
-        effect="solid"
-        className="!opacity-100 bg-blue-9 be:bg-gray-9 !rounded-md !py-1 !px-2"
-        arrowColor="transparent"
-        disable={isOpen}
-      />
     </a>
   );
+
+  if (isOpen) return anchor;
+
+  return (
+    <Tippy
+      className="!opacity-100 bg-blue-9 be:bg-gray-9 th-dark:bg-gray-true-9 !rounded-md !py-2 !px-3"
+      content={label}
+      delay={[0, 0]}
+      duration={[0, 0]}
+      zIndex={1000}
+      placement="right"
+      arrow
+      allowHTML
+      interactive
+    >
+      {anchor}
+    </Tippy>
+  );
 }
 
 function useSrefActive(

app/react/sidebar/SidebarItem/Menu.tsx

@@ -33,6 +33,10 @@ export function Menu({
 
   const CollapseButtonIcon = isOpen ? ChevronUp : ChevronDown;
 
+  if (!isSidebarOpen) {
+    return head as JSX.Element;
+  }
+
   return (
     <div className="flex-1">
       <div className="flex w-full justify-between items-center relative ">

app/react/sidebar/SidebarItem/SidebarItem.tsx

@@ -39,7 +39,7 @@ export function SidebarItem({
   );
 
   return (
-    <Wrapper label={label}>
+    <Wrapper label={label} className="sidebar">
       {children ? (
         <Menu head={head} openOnPaths={[...openOnPaths, ...childrenPath]}>
           {children}