fix(Tooltip): add z-index to the tooltip panel (#570)

Endava · Oct 11, 2023 · 4f109c2 · 4f109c2
1 parent 96ce056
commit 4f109c2
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/packages/beeq/src/components/tooltip/scss/bq-tooltip.scss b/packages/beeq/src/components/tooltip/scss/bq-tooltip.scss
@@ -7,7 +7,7 @@
 .bq-tooltip--panel {
   @include animation-fade-in;
 
-  @apply pointer-events-none fixed box-border bg-[var(--bq-tooltip--background-color)];
+  @apply pointer-events-none fixed box-border bg-[var(--bq-tooltip--background-color)] z-[--bq-tooltip--z-index];
   @apply w-[var(--bq-tooltip--width)] max-w-[var(--bq-tooltip--max-width)] px-[var(--bq-tooltip--paddingX)] py-[var(--bq-tooltip--paddingY)];
   @apply text-[length:var(--bq-tooltip--font-size)] leading-[var(--bq-tooltip--line-height)] text-[color:var(--bq-tooltip--text-color)];
   @apply rounded-[var(--bq-tooltip--border-radius)] border-[length:var(--bq-tooltip--border-width)] border-[color:var(--bq-tooltip--border-color)];

diff --git a/packages/beeq/src/components/tooltip/scss/bq-tooltip.variables.scss b/packages/beeq/src/components/tooltip/scss/bq-tooltip.variables.scss
@@ -3,6 +3,20 @@
 /* -------------------------------------------------------------------------- */
 
 :host {
+  /**
+   * @prop --bq-tooltip--background-color - Tooltip background color
+   * @prop --bq-tooltip--box-shadow - Tooltip box shadow
+   * @prop --bq-tooltip--font-size - Tooltip font size
+   * @prop --bq-tooltip--line-height - Tooltip line height
+   * @prop --bq-tooltip--text-color - Tooltip text color
+   * @prop --bq-tooltip--paddingX - Tooltip horizontal padding
+   * @prop --bq-tooltip--paddingY - Tooltip vertical padding
+   * @prop --bq-tooltip--border-color - Tooltip border color
+   * @prop --bq-tooltip--border-radius - Tooltip border radius
+   * @prop --bq-tooltip--border-style - Tooltip border style
+   * @prop --bq-tooltip--border-width - Tooltip border width
+   * @prop --bq-tooltip--z-index: Tooltip z-index
+   */
   --bq-tooltip--background-color: theme('colors.ui.inverse');
   --bq-tooltip--box-shadow: theme('boxShadow.m');
 
@@ -20,4 +34,6 @@
 
   --bq-tooltip--max-width: 320px;
   --bq-tooltip--width: max-content;
+
+  --bq-tooltip--z-index: theme('zIndex.10');
 }