From 19645248ab7bc78dc872fa176c1a3650d7d6d644 Mon Sep 17 00:00:00 2001 From: undergroundwires Date: Fri, 15 Dec 2023 09:05:50 +0100 Subject: [PATCH] Fix tooltip falling behind elements on fade out This commit ensures that the tooltip maintains its `z-index` during both visibility and invisibility transitions. This prevents the tooltip from falling behind other elements during its fade-in and fade-out animations, providing smoother and more visually consistent user experience. --- src/presentation/components/Shared/TooltipWrapper.vue | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/presentation/components/Shared/TooltipWrapper.vue b/src/presentation/components/Shared/TooltipWrapper.vue index 6ea34f64..e65f96bb 100644 --- a/src/presentation/components/Shared/TooltipWrapper.vue +++ b/src/presentation/components/Shared/TooltipWrapper.vue @@ -193,6 +193,13 @@ $color-tooltip-background: $color-primary-darkest; @include set-visibility(false); @include fixed-fullscreen; + /* + The z-index is set for both visible and invisible states to ensure it maintains its stacking order + above other elements during transitions. This approach prevents the tooltip from falling behind other + elements during the fade-in and fade-out animations. + */ + z-index: 10; + /* Reset white-space to the default value to prevent inheriting styles from the trigger element. This prevents unintentional layout issues or overflow. @@ -204,7 +211,6 @@ $color-tooltip-background: $color-primary-darkest; @include hover-or-touch { + .tooltip__overlay { @include set-visibility(true); - z-index: 10000; } } }