diff --git a/packages/beeq/src/components/tooltip/scss/bq-tooltip.scss b/packages/beeq/src/components/tooltip/scss/bq-tooltip.scss index 4cd18a585..e6d8e4029 100644 --- 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 index 95d96c12a..ef8fba301 100644 --- 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'); }