From 0168fa2c1eb626db53dc1fcfdbc04523568bb409 Mon Sep 17 00:00:00 2001
From: Tzipi <101048005+Tzipi-kaltura@users.noreply.github.com>
Date: Tue, 7 May 2024 12:36:14 +0300
Subject: [PATCH] fix(ADA-492): Low vision users or users requiring screen to
 be magnified will have difficulties to read through the additional
 information presented (#878)

Issue:
When hovering on controls tooltip is displayed, when you try to move the mouse inside the tooltip area the tooltip disappear.

Fix:
Adding inset around the tooltip so user can move inside the tooltip before it disappear.

Resolves ADA-492
---
 src/components/tooltip/_tooltip.scss | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/tooltip/_tooltip.scss b/src/components/tooltip/_tooltip.scss
index 1bf0140dc..e2affdca0 100644
--- a/src/components/tooltip/_tooltip.scss
+++ b/src/components/tooltip/_tooltip.scss
@@ -25,7 +25,7 @@
     width: max-content;
     display: table;
 
-    &:after {
+    &:before {
       content: '';
       position: absolute;
       border-width: 5px;
@@ -34,11 +34,16 @@
       color: $tooltip-background-color;
       z-index: -1;
     }
+    &:after {
+      content: '';
+      position: absolute;
+      inset: -1em;
+    }
     &.tooltip-top {
       bottom: $tooltip-margin;
       left: 50%;
       transform: translate(-50%);
-      &:after {
+      &:before {
         bottom: -$tooltip-arrow-height;
         left: 50%;
         transform: translate(-50%) rotate(45deg) skew(5deg, 5deg);
@@ -49,7 +54,7 @@
       left: 50%;
       transform: translate(-100%);
       margin-left: $tooltip-semi-side-margin;
-      &:after {
+      &:before {
         bottom: -$tooltip-arrow-height;
         right: 0;
         margin-right: $tooltip-semi-side-arrow-margin;
@@ -60,7 +65,7 @@
       bottom: $tooltip-margin;
       left: 50%;
       transform: translate(-$tooltip-semi-side-margin);
-      &:after {
+      &:before {
         bottom: -$tooltip-arrow-height;
         left: 0;
         margin-left: $tooltip-semi-side-arrow-margin;
@@ -71,7 +76,7 @@
       top: $tooltip-margin;
       left: 50%;
       transform: translate(-50%);
-      &:after {
+      &:before {
         top: -$tooltip-arrow-height;
         left: 50%;
         margin-left: -5px;
@@ -82,7 +87,7 @@
       top: $tooltip-margin;
       left: 50%;
       transform: translate(-$tooltip-semi-side-margin);
-      &:after {
+      &:before {
         top: -$tooltip-arrow-height;
         left: 0;
         margin-left: $tooltip-semi-side-arrow-margin;
@@ -94,7 +99,7 @@
       transform: translate(-100%);
       left: 50%;
       margin-left: $tooltip-semi-side-margin;
-      &:after {
+      &:before {
         top: -$tooltip-arrow-height;
         right: 0;
         margin-right: $tooltip-semi-side-arrow-margin;
@@ -105,7 +110,7 @@
       top: 50%;
       right: $tooltip-margin;
       transform: translate(0, -50%);
-      &:after {
+      &:before {
         top: 50%;
         left: 100%;
         margin-left: -6px;
@@ -117,7 +122,7 @@
       top: 50%;
       left: $tooltip-margin;
       transform: translate(0, -50%);
-      &:after {
+      &:before {
         top: 50%;
         right: 100%;
         margin-top: -5px;