refactor(app): replace angularjs tooltip with react [EE-3606] (#7172)

* refactor(app): replace angularjs tooltip with react

app/react/components/PageHeader/HeaderTitle.tsx

@@ -27,7 +27,12 @@ export function HeaderTitle({ title, children }: PropsWithChildren<Props>) {
       {title}
       <span className="header_title_content">{children}</span>
       <Menu>
-        <MenuButton className={clsx('pull-right', styles.menuButton)}>
+        <MenuButton
+          className={clsx(
+            'pull-right flex items-center gap-1',
+            styles.menuButton
+          )}
+        >
           <User className="icon-nested-gray" />
           {user && <span>{user.Username}</span>}
           <ChevronDown className={styles.arrowDown} />

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

@@ -1,3 +1,7 @@
+:global(portainer-tooltip) {
+  @apply inline-flex;
+}
+
 .tooltip-wrapper {
   display: inline-block;
   position: relative;

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

@@ -1,20 +1,29 @@
 import ReactTooltip from 'react-tooltip';
 import { HelpCircle } from 'react-feather';
+import clsx from 'clsx';
+import _ from 'lodash';
 
 import styles from './Tooltip.module.css';
 
-type Place = 'top' | 'right' | 'bottom' | 'left';
+type Position = 'top' | 'right' | 'bottom' | 'left';
 
 export interface Props {
-  position?: Place;
+  position?: Position;
   message: string;
 }
 
 export function Tooltip({ message, position = 'bottom' }: Props) {
+  const id = `tooltip-${_.uniqueId()}`;
+
   return (
-    <span data-tip={message} className={styles.icon}>
+    <span
+      data-tip={message}
+      data-for={id}
+      className={clsx(styles.icon, 'inline-flex text-base')}
+    >
       <HelpCircle className="feather" aria-hidden="true" />
       <ReactTooltip
+        id={id}
         multiline
         type="info"
         place={position}

app/react/components/form-components/SwitchField/SwitchField.tsx

@@ -43,7 +43,7 @@ export function SwitchField({
         )}
       >
         {label}
-        {tooltip && <Tooltip position="bottom" message={tooltip} />}
+        {tooltip && <Tooltip message={tooltip} />}
       </span>
       <Switch
         className="space-right"