From 49fbd87bd8ecfa51a7f466c4abbcf89487df1934 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Fri, 15 Nov 2024 10:11:34 +0100
Subject: [PATCH] fix(SW-350) close tooltip on iOS

---
 components/TempDesignSystem/Tooltip/index.tsx    | 16 ++++++++++++++--
 .../TempDesignSystem/Tooltip/tooltip.module.css  | 12 ++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/components/TempDesignSystem/Tooltip/index.tsx b/components/TempDesignSystem/Tooltip/index.tsx
index ce133b5ee..033fc9a04 100644
--- a/components/TempDesignSystem/Tooltip/index.tsx
+++ b/components/TempDesignSystem/Tooltip/index.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react"
+import { PropsWithChildren, useState } from "react"
 
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
@@ -16,8 +16,20 @@ export function Tooltip<P extends TooltipPosition>({
   children,
 }: PropsWithChildren<TooltipProps<P>>) {
   const className = tooltipVariants({ position, arrow })
+  const [isActive, setIsActive] = useState(false)
+
+  function handleToggle() {
+    setIsActive(!isActive)
+  }
+
   return (
-    <div className={styles.tooltipContainer} role="tooltip" aria-label={text}>
+    <div
+      className={styles.tooltipContainer}
+      role="tooltip"
+      aria-label={text}
+      onClick={handleToggle}
+      data-active={isActive}
+    >
       <div className={className}>
         {heading && (
           <Caption type="bold" color="white">
diff --git a/components/TempDesignSystem/Tooltip/tooltip.module.css b/components/TempDesignSystem/Tooltip/tooltip.module.css
index 58676e967..e25433f7c 100644
--- a/components/TempDesignSystem/Tooltip/tooltip.module.css
+++ b/components/TempDesignSystem/Tooltip/tooltip.module.css
@@ -140,3 +140,15 @@
   border-width: 7px 8px 7px 0;
   border-color: transparent var(--UI-Text-Active) transparent transparent;
 }
+
+@media screen and (max-width: 768px) {
+  .tooltipContainer[data-active="true"] .tooltip {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  .tooltipContainer[data-active="false"] .tooltip {
+    visibility: hidden;
+    opacity: 0;
+  }
+}