fix(web): tooltips (#1154)

* fix broken tooltips, replace react-tooltip with react-popper-tooltip

* make tooltips use ExternalLink component

* fix import

* get rid of unused import

* fix(tooltip): set delayHide

* removed unecessary comment

* fix tooltip on mobile

* stop tooltip label propagation (mainly for mobile devices)

* added onClick convenience prop for label component wrapper (since onClick isn't propagated down)

---------

Co-authored-by: soup <soup@r4tio.dev>

web/src/components/header/Header.tsx

@@ -15,6 +15,7 @@ import Toast from "@components/notifications/Toast";
 import { LeftNav } from "./LeftNav";
 import { RightNav } from "./RightNav";
 import { MobileNav } from "./MobileNav";
+import { ExternalLink } from "@components/ExternalLink";
 
 export const Header = () => {
   const { data: config } = useQuery({
@@ -77,13 +78,13 @@ export const Header = () => {
             </div>
 
             {data?.html_url && (
-              <a href={data.html_url} target="_blank" rel="noopener noreferrer">
+              <ExternalLink href={data.html_url}>
                 <div className="flex mt-4 py-2 bg-blue-500 rounded justify-center">
                   <MegaphoneIcon className="h-6 w-6 text-blue-100" />
                   <span className="text-blue-100 font-medium mx-3">New update available!</span>
                   <span className="inline-flex items-center rounded-md bg-blue-100 px-2.5 py-0.5 text-sm font-medium text-blue-800">{data?.name}</span>
                 </div>
-              </a>
+              </ExternalLink>
             )}
           </div>
 

web/src/components/header/LeftNav.tsx

@@ -10,6 +10,7 @@ import { classNames } from "@utils";
 import { ReactComponent as Logo } from "@app/logo.svg";
 
 import { NAV_ROUTES } from "./_shared";
+import { ExternalLink } from "@components/ExternalLink";
 
 export const LeftNav = () => (
   <div className="flex items-center">
@@ -38,9 +39,7 @@ export const LeftNav = () => (
             {item.name}
           </NavLink>
         ))}
-        <a
-          rel="noopener noreferrer"
-          target="_blank"
+        <ExternalLink
           href="https://autobrr.com"
           className={classNames(
             "text-gray-600 dark:text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-2xl text-sm font-medium",
@@ -52,7 +51,7 @@ export const LeftNav = () => (
             className="inline ml-1 h-5 w-5"
             aria-hidden="true"
           />
-        </a>
+        </ExternalLink>
       </div>
     </div>
   </div>