diff --git a/client/patterns/tooltip/Details.tsx b/client/patterns/tooltip/Details.tsx
index f406d01..4eac9e5 100644
--- a/client/patterns/tooltip/Details.tsx
+++ b/client/patterns/tooltip/Details.tsx
@@ -47,16 +47,20 @@ css={`
     position: relative;
 }
 
-/* Show the arrow and content when hovering the trigger element */
+/* Show the arrow and content and restore pointer events when hovering the trigger element */
 .container:hover .container__arrow,
 .container:hover .container__content {
     opacity: 1;
+    pointer-events: initial;
 }
 
 .container__arrow {
     /* Invisible by default */
     opacity: 0;
 
+    /* To prevent accidental interactions with other elements  */
+    pointer-events: none;
+
     /* Border */
     border: 8px solid transparent;
     border-top-color: #00439e;
@@ -79,6 +83,9 @@ css={`
     /* Invisible by default */
     opacity: 0;
 
+    /* To prevent accidental interactions with other elements  */
+    pointer-events: none;
+
     /* Background color, must be the same as the border color of arrow */
     background-color: #00439e;
     border-radius: 2px;
diff --git a/client/patterns/tooltip/tooltip.css b/client/patterns/tooltip/tooltip.css
index b6150ab..2447273 100644
--- a/client/patterns/tooltip/tooltip.css
+++ b/client/patterns/tooltip/tooltip.css
@@ -9,6 +9,7 @@
 .p-tooltip:hover .p-tooltip-arrow,
 .p-tooltip:hover .p-tooltip-content {
     opacity: 1;
+    pointer-events: initial;
 }
 .p-tooltip-arrow {
     border: 8px solid transparent;
@@ -17,6 +18,7 @@
     height: 0;
     left: 50%;
     opacity: 0;
+    pointer-events: none;
     position: absolute;
     transform: translate(-50%, 8px);
     width: 0;
@@ -28,6 +30,7 @@
     bottom: 100%;
     left: 50%;
     opacity: 0;
+    pointer-events: none;
     position: absolute;
     transform: translate(-50%, -8px);
     z-index: 10;