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

app/react/components/Tip/Tooltip/Tooltip.module.css

@@ -1,25 +0,0 @@
-:global(portainer-tooltip) {
-  @apply inline-flex;
-}
-
-.tooltip-wrapper {
-  display: inline-block;
-  position: relative;
-}
-
-.tooltip {
-  background-color: var(--bg-tooltip-color) !important;
-  padding: 0.833em 1em !important;
-  color: var(--text-tooltip-color) !important;
-  border-radius: 10px !important;
-  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15) !important;
-  max-width: 400px;
-  text-align: center;
-  font-size: 12px !important;
-  font-weight: 400;
-}
-
-.icon {
-  margin-left: 5px;
-  cursor: pointer;
-}

app/react/components/Tip/Tooltip/Tooltip.tsx

@@ -1,11 +1,6 @@
-import ReactTooltip from 'react-tooltip';
 import { HelpCircle } from 'lucide-react';
-import clsx from 'clsx';
-import _ from 'lodash';
 
-import styles from './Tooltip.module.css';
-
-type Position = 'top' | 'right' | 'bottom' | 'left';
+import { TooltipWithChildren, Position } from '../TooltipWithChildren';
 
 export interface Props {
   position?: Position;
@@ -14,24 +9,15 @@ export interface Props {
 }
 
 export function Tooltip({ message, position = 'bottom', className }: Props) {
-  const id = _.uniqueId('tooltip-');
-
   return (
-    <span
-      data-tip={message}
-      data-for={id}
-      className={clsx(styles.icon, 'inline-flex text-base')}
+    <TooltipWithChildren
+      message={message}
+      position={position}
+      className={className}
     >
-      <HelpCircle className="lucide" aria-hidden="true" />
-      <ReactTooltip
-        id={id}
-        multiline
-        type="info"
-        place={position}
-        effect="solid"
-        className={clsx(styles.tooltip, className)}
-        arrowColor="transparent"
-      />
-    </span>
+      <span className="inline-flex text-base">
+        <HelpCircle className="lucide ml-1" aria-hidden="true" />
+      </span>
+    </TooltipWithChildren>
   );
 }