44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix tooltip falling behind elements on fade out

Browse Source 
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.
This commit is contained in:
undergroundwires
2023-12-15 09:05:50 +01:00
parent 255c51c8a0
commit 19645248ab
1 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/presentation/components/Shared/TooltipWrapper.vue
View File

@@ -193,6 +193,13 @@ $color-tooltip-background: $color-primary-darkest;
@include set-visibility(false); @include set-visibility(false);
@include fixed-fullscreen; @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. Reset white-space to the default value to prevent inheriting styles from the trigger element.
This prevents unintentional layout issues or overflow. This prevents unintentional layout issues or overflow.
@@ -204,7 +211,6 @@ $color-tooltip-background: $color-primary-darkest;
@include hover-or-touch { @include hover-or-touch {
+ .tooltip__overlay { + .tooltip__overlay {
@include set-visibility(true); @include set-visibility(true);
z-index: 10000;
} }
} }
} }