From aafebd93cc70c7788f2d3d623ee9a9b9c7de6fa1 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Tue, 14 Mar 2023 11:57:17 +0100
Subject: [PATCH] fix(material/tooltip): only expand hover area on side closest
 to trigger

Fixes that we were adding an additional hover area on all sides of the tooltip, rather than only the side that is next to the trigger.

Fixes #26557.
---
 src/material/tooltip/tooltip.scss | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/material/tooltip/tooltip.scss b/src/material/tooltip/tooltip.scss
index ae7194fa0c4b..8c8738a21bf8 100644
--- a/src/material/tooltip/tooltip.scss
+++ b/src/material/tooltip/tooltip.scss
@@ -26,12 +26,32 @@
   &::before {
     $offset: -8px;
     content: '';
-    top: $offset;
-    right: $offset;
-    bottom: $offset;
-    left: $offset;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     z-index: -1;
     position: absolute;
+
+    // Only set the offset on the side closest to the panel so we
+    // don't accidentally cover more content than we need to.
+    .mat-mdc-tooltip-panel-below & {
+      top: $offset;
+    }
+
+    .mat-mdc-tooltip-panel-above & {
+      bottom: $offset;
+    }
+
+    // Note that here we use left/right instead of before/after
+    // so that we don't have to add extra styles for RTL.
+    .mat-mdc-tooltip-panel-right & {
+      left: $offset;
+    }
+
+    .mat-mdc-tooltip-panel-left & {
+      right: $offset;
+    }
   }
 
   &._mat-animation-noopable {