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.
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user