@db-ux/core-components 1.0.0-test-13b991d

package/build/components/tooltip/tooltip.css

@@ -0,0 +1,346 @@
+/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
+/* Use fixed spacings for all kind of distances (margin, padding, ...) */
+/* The primary use-case for responsive spacings are
+paddings/gaps in an application e.g. the <main> should have a responsive padding. */
+/* Elevation */
+/* Border */
+/* Transitions */
+/* Variants for adaptive components like input, select, notification, ... */
+/**
+	Generates 3 types of placeholders, e.g:
+	- %db-component-variables-md
+	- %db-font-size-md
+	- %db-overwrite-font-size-md
+ */
+.db-tooltip {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
+  --db-base-line-height: var(--db-type-body-line-height-sm);
+  --db-base-font-size: var(--db-type-body-font-size-sm);
+  line-height: var(--db-type-body-line-height-sm);
+  font-size: var(--db-type-body-font-size-sm);
+}
+
+@keyframes show-right-to-left {
+  from {
+    transform: translateX(110%);
+  }
+  to {
+    transform: translateX(0%);
+  }
+}
+@keyframes hide-right-to-left {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(110%);
+  }
+}
+@keyframes show-left-to-right {
+  from {
+    transform: translateX(-110%);
+  }
+  to {
+    transform: translateX(0%);
+  }
+}
+@keyframes hide-left-to-right {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(-110%);
+  }
+}
+@keyframes show-bottom-to-top {
+  from {
+    transform: translateY(110%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@keyframes hide-bottom-to-top {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(110%);
+  }
+}
+@keyframes show-top-to-bottom {
+  from {
+    transform: translateY(-110%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@keyframes hide-top-to-bottom {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(-110%);
+  }
+}
+@keyframes accordion-open {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+@keyframes popover-animation {
+  0% {
+    opacity: 0;
+    transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
+  }
+  100% {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
+  }
+}
+.db-tooltip[data-show-arrow=true]::after, .db-tooltip {
+  border: var(--db-border-height-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+
+.db-tooltip {
+  /* stylelint-disable-next-line db-ux/use-border-radius */
+  border-radius: var(--default-card-border-radius, var(--db-border-radius-sm));
+}
+
+.db-tooltip:not([data-placement]), [data-placement=bottom].db-tooltip:not([data-outside-vy]), [data-placement=top].db-tooltip:not([data-outside-vy]), .db-tooltip:is([data-outside-vy=bottom], [data-outside-vy=top]):not([data-outside-vx],
+[data-placement$=end],
+[data-placement$=start]) {
+  --db-popover-center-x: -50%;
+  inset-inline-start: 50%;
+}
+[data-placement=left].db-tooltip:not([data-outside-vx]), [data-placement=right].db-tooltip:not([data-outside-vx]), [data-outside-vx=left].db-tooltip:not([data-placement$=end],
+[data-placement$=start]), [data-outside-vx=right].db-tooltip:not([data-placement$=end],
+[data-placement$=start]) {
+  --db-popover-center-y: -50%;
+  inset-block-start: 50%;
+}
+
+.db-tooltip {
+  --db-popover-distance: var(--db-spacing-fixed-2xs);
+}
+.db-tooltip::before {
+  content: "";
+  position: absolute;
+}
+[data-gap=true].db-tooltip {
+  --db-popover-gap: 1;
+  --db-popover-distance: var(--db-spacing-fixed-md);
+}
+.db-tooltip:is(.db-tooltip) {
+  --db-popover-distance: var(--db-spacing-fixed-sm);
+}
+[data-placement^=bottom].db-tooltip:not([data-outside-vy])[data-placement$=end], [data-placement^=top].db-tooltip:not([data-outside-vy])[data-placement$=end], [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-placement$=end], [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-placement$=end] {
+  inset-inline-end: 0;
+}
+[data-placement^=bottom].db-tooltip:not([data-outside-vy])[data-placement$=start], [data-placement^=top].db-tooltip:not([data-outside-vy])[data-placement$=start], [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-placement$=start], [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-placement$=start] {
+  inset-inline-start: 0;
+}
+[data-placement^=left].db-tooltip:not([data-outside-vx])[data-placement$=end], [data-placement^=right].db-tooltip:not([data-outside-vx])[data-placement$=end], [data-outside-vx=left][data-placement$=end].db-tooltip, [data-outside-vx=right][data-placement$=end].db-tooltip {
+  inset-block-end: 0;
+}
+[data-placement^=left].db-tooltip:not([data-outside-vx])[data-placement$=start], [data-placement^=right].db-tooltip:not([data-outside-vx])[data-placement$=start], [data-outside-vx=left][data-placement$=start].db-tooltip, [data-outside-vx=right][data-placement$=start].db-tooltip {
+  inset-block-start: 0;
+}
+.db-tooltip:not([data-placement], [data-outside-vy]), [data-placement^=bottom].db-tooltip:not([data-outside-vy]), [data-outside-vy=top].db-tooltip:not([data-outside-vx]) {
+  inset-block-start: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
+}
+.db-tooltip:not([data-placement], [data-outside-vy])::before, [data-placement^=bottom].db-tooltip:not([data-outside-vy])::before, [data-outside-vy=top].db-tooltip:not([data-outside-vx])::before {
+  inset-inline-start: 0;
+  inline-size: 100%;
+  block-size: var(--db-popover-distance);
+  inset-block-start: calc(-1 * var(--db-popover-distance));
+}
+[data-placement^=top].db-tooltip:not([data-outside-vy]), [data-outside-vy=bottom].db-tooltip:not([data-outside-vx]) {
+  inset-block-end: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
+}
+[data-placement^=top].db-tooltip:not([data-outside-vy])::before, [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])::before {
+  inset-inline-end: 0;
+  inline-size: 100%;
+  block-size: var(--db-popover-distance);
+  inset-block-end: calc(-1 * var(--db-popover-distance));
+}
+[data-placement^=left].db-tooltip:not([data-outside-vx]), [data-outside-vx=right].db-tooltip {
+  inset-inline-end: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
+}
+[data-placement^=left].db-tooltip:not([data-outside-vx])::before, [data-outside-vx=right].db-tooltip::before {
+  inset-block-end: 0;
+  block-size: 100%;
+  inline-size: var(--db-popover-distance);
+  inset-inline-end: calc(-1 * var(--db-popover-distance));
+}
+[data-placement^=right].db-tooltip:not([data-outside-vx]), [data-outside-vx=left].db-tooltip {
+  inset-inline-start: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
+}
+[data-placement^=right].db-tooltip:not([data-outside-vx])::before, [data-outside-vx=left].db-tooltip::before {
+  inset-block-start: 0;
+  block-size: 100%;
+  inline-size: var(--db-popover-distance);
+  inset-inline-start: calc(-1 * var(--db-popover-distance));
+}
+
+.db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover .db-tooltip:first-of-type, [data-has-tooltip=true]:focus .db-tooltip:first-of-type {
+  display: revert;
+}
+.db-tooltip[data-e2e-hover=true]:not([data-placement], [data-outside-vy]), [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-outside-vy]):first-of-type, [data-has-tooltip=true]:focus .db-tooltip:not([data-placement], [data-outside-vy]):first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vy]), [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-outside-vy]):first-of-type, [data-has-tooltip=true]:focus [data-placement^=bottom].db-tooltip:not([data-outside-vy]):first-of-type, [data-outside-vy=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vx]), [data-has-tooltip=true]:hover [data-outside-vy=top].db-tooltip:not([data-outside-vx]):first-of-type, [data-has-tooltip=true]:focus [data-outside-vy=top].db-tooltip:not([data-outside-vx]):first-of-type {
+  --db-popover-translate-y: -25%;
+}
+.db-tooltip[data-e2e-hover=true]:not([data-placement], [data-outside-vy]):not([data-animation]), [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-outside-vy]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus .db-tooltip:not([data-placement], [data-outside-vy]):not([data-animation]):first-of-type, .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-outside-vy])[data-animation=false], [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-outside-vy])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus .db-tooltip:not([data-placement], [data-outside-vy])[data-animation=false]:first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vy]):not([data-animation]), [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-outside-vy]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus [data-placement^=bottom].db-tooltip:not([data-outside-vy]):not([data-animation]):first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vy])[data-animation=false], [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-outside-vy])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus [data-placement^=bottom].db-tooltip:not([data-outside-vy])[data-animation=false]:first-of-type, [data-outside-vy=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vx]):not([data-animation]), [data-has-tooltip=true]:hover [data-outside-vy=top].db-tooltip:not([data-outside-vx]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus [data-outside-vy=top].db-tooltip:not([data-outside-vx]):not([data-animation]):first-of-type, [data-outside-vy=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=false], [data-has-tooltip=true]:hover [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-animation=false]:first-of-type {
+  opacity: 1;
+  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-outside-vy])[data-animation=true], [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-outside-vy])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus .db-tooltip:not([data-placement], [data-outside-vy])[data-animation=true]:first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vy])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-outside-vy])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus [data-placement^=bottom].db-tooltip:not([data-outside-vy])[data-animation=true]:first-of-type, [data-outside-vy=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true], [data-has-tooltip=true]:hover [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-animation=true]:first-of-type {
+    animation: popover-animation var(--db-transition-straight-emotional) normal both;
+  }
+  .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-outside-vy])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-outside-vy])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus .db-tooltip:not([data-placement], [data-outside-vy])[data-animation=true][data-delay=slow]:first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vy])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-outside-vy])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus [data-placement^=bottom].db-tooltip:not([data-outside-vy])[data-animation=true][data-delay=slow]:first-of-type, [data-outside-vy=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=slow]:first-of-type {
+    animation-delay: var(--db-transition-duration-fast);
+  }
+  .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-outside-vy])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-outside-vy])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus .db-tooltip:not([data-placement], [data-outside-vy])[data-animation=true][data-delay=fast]:first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vy])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-outside-vy])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus [data-placement^=bottom].db-tooltip:not([data-outside-vy])[data-animation=true][data-delay=fast]:first-of-type, [data-outside-vy=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=fast]:first-of-type {
+    animation-delay: calc(var(--db-transition-duration-fast) / 2);
+  }
+}
+[data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vy]), [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-outside-vy]):first-of-type, [data-has-tooltip=true]:focus [data-placement^=top].db-tooltip:not([data-outside-vy]):first-of-type, [data-outside-vy=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vx]), [data-has-tooltip=true]:hover [data-outside-vy=bottom].db-tooltip:not([data-outside-vx]):first-of-type, [data-has-tooltip=true]:focus [data-outside-vy=bottom].db-tooltip:not([data-outside-vx]):first-of-type {
+  --db-popover-translate-y: 25%;
+}
+[data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vy]):not([data-animation]), [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-outside-vy]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus [data-placement^=top].db-tooltip:not([data-outside-vy]):not([data-animation]):first-of-type, [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vy])[data-animation=false], [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-outside-vy])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus [data-placement^=top].db-tooltip:not([data-outside-vy])[data-animation=false]:first-of-type, [data-outside-vy=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vx]):not([data-animation]), [data-has-tooltip=true]:hover [data-outside-vy=bottom].db-tooltip:not([data-outside-vx]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus [data-outside-vy=bottom].db-tooltip:not([data-outside-vx]):not([data-animation]):first-of-type, [data-outside-vy=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=false], [data-has-tooltip=true]:hover [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-animation=false]:first-of-type {
+  opacity: 1;
+  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vy])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-outside-vy])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus [data-placement^=top].db-tooltip:not([data-outside-vy])[data-animation=true]:first-of-type, [data-outside-vy=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true], [data-has-tooltip=true]:hover [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-animation=true]:first-of-type {
+    animation: popover-animation var(--db-transition-straight-emotional) normal both;
+  }
+  [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vy])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-outside-vy])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus [data-placement^=top].db-tooltip:not([data-outside-vy])[data-animation=true][data-delay=slow]:first-of-type, [data-outside-vy=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=slow]:first-of-type {
+    animation-delay: var(--db-transition-duration-fast);
+  }
+  [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vy])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-outside-vy])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus [data-placement^=top].db-tooltip:not([data-outside-vy])[data-animation=true][data-delay=fast]:first-of-type, [data-outside-vy=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=fast]:first-of-type {
+    animation-delay: calc(var(--db-transition-duration-fast) / 2);
+  }
+}
+[data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-outside-vx]), [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-outside-vx]):first-of-type, [data-has-tooltip=true]:focus [data-placement^=right].db-tooltip:not([data-outside-vx]):first-of-type, [data-outside-vx=left].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-outside-vx=left].db-tooltip:first-of-type, [data-has-tooltip=true]:focus [data-outside-vx=left].db-tooltip:first-of-type {
+  --db-popover-translate-x: -25%;
+}
+[data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-outside-vx]):not([data-animation]), [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-outside-vx]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus [data-placement^=right].db-tooltip:not([data-outside-vx]):not([data-animation]):first-of-type, [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=false], [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-outside-vx])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus [data-placement^=right].db-tooltip:not([data-outside-vx])[data-animation=false]:first-of-type, [data-outside-vx=left].db-tooltip[data-e2e-hover=true]:not([data-animation]), [data-has-tooltip=true]:hover [data-outside-vx=left].db-tooltip:not([data-animation]):first-of-type, [data-has-tooltip=true]:focus [data-outside-vx=left].db-tooltip:not([data-animation]):first-of-type, [data-outside-vx=left][data-animation=false].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-outside-vx=left][data-animation=false].db-tooltip:first-of-type, [data-has-tooltip=true]:focus [data-outside-vx=left][data-animation=false].db-tooltip:first-of-type {
+  opacity: 1;
+  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-outside-vx])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus [data-placement^=right].db-tooltip:not([data-outside-vx])[data-animation=true]:first-of-type, [data-outside-vx=left][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-outside-vx=left][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus [data-outside-vx=left][data-animation=true].db-tooltip:first-of-type {
+    animation: popover-animation var(--db-transition-straight-emotional) normal both;
+  }
+  [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus [data-placement^=right].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=slow]:first-of-type, [data-outside-vx=left][data-animation=true][data-delay=slow].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-outside-vx=left][data-animation=true][data-delay=slow].db-tooltip:first-of-type, [data-has-tooltip=true]:focus [data-outside-vx=left][data-animation=true][data-delay=slow].db-tooltip:first-of-type {
+    animation-delay: var(--db-transition-duration-fast);
+  }
+  [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus [data-placement^=right].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=fast]:first-of-type, [data-outside-vx=left][data-animation=true][data-delay=fast].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-outside-vx=left][data-animation=true][data-delay=fast].db-tooltip:first-of-type, [data-has-tooltip=true]:focus [data-outside-vx=left][data-animation=true][data-delay=fast].db-tooltip:first-of-type {
+    animation-delay: calc(var(--db-transition-duration-fast) / 2);
+  }
+}
+[data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-outside-vx]), [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-outside-vx]):first-of-type, [data-has-tooltip=true]:focus [data-placement^=left].db-tooltip:not([data-outside-vx]):first-of-type, [data-outside-vx=right].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-outside-vx=right].db-tooltip:first-of-type, [data-has-tooltip=true]:focus [data-outside-vx=right].db-tooltip:first-of-type {
+  --db-popover-translate-x: 25%;
+}
+[data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-outside-vx]):not([data-animation]), [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-outside-vx]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus [data-placement^=left].db-tooltip:not([data-outside-vx]):not([data-animation]):first-of-type, [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=false], [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-outside-vx])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus [data-placement^=left].db-tooltip:not([data-outside-vx])[data-animation=false]:first-of-type, [data-outside-vx=right].db-tooltip[data-e2e-hover=true]:not([data-animation]), [data-has-tooltip=true]:hover [data-outside-vx=right].db-tooltip:not([data-animation]):first-of-type, [data-has-tooltip=true]:focus [data-outside-vx=right].db-tooltip:not([data-animation]):first-of-type, [data-outside-vx=right][data-animation=false].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-outside-vx=right][data-animation=false].db-tooltip:first-of-type, [data-has-tooltip=true]:focus [data-outside-vx=right][data-animation=false].db-tooltip:first-of-type {
+  opacity: 1;
+  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-outside-vx])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus [data-placement^=left].db-tooltip:not([data-outside-vx])[data-animation=true]:first-of-type, [data-outside-vx=right][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-outside-vx=right][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus [data-outside-vx=right][data-animation=true].db-tooltip:first-of-type {
+    animation: popover-animation var(--db-transition-straight-emotional) normal both;
+  }
+  [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus [data-placement^=left].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=slow]:first-of-type, [data-outside-vx=right][data-animation=true][data-delay=slow].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-outside-vx=right][data-animation=true][data-delay=slow].db-tooltip:first-of-type, [data-has-tooltip=true]:focus [data-outside-vx=right][data-animation=true][data-delay=slow].db-tooltip:first-of-type {
+    animation-delay: var(--db-transition-duration-fast);
+  }
+  [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus [data-placement^=left].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=fast]:first-of-type, [data-outside-vx=right][data-animation=true][data-delay=fast].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-outside-vx=right][data-animation=true][data-delay=fast].db-tooltip:first-of-type, [data-has-tooltip=true]:focus [data-outside-vx=right][data-animation=true][data-delay=fast].db-tooltip:first-of-type {
+    animation-delay: calc(var(--db-transition-duration-fast) / 2);
+  }
+}
+
+.db-tooltip {
+  position: absolute;
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+  box-shadow: var(--db-elevation-md);
+  display: none;
+  z-index: 1;
+  white-space: nowrap;
+}
+[data-width=fixed].db-tooltip {
+  inline-size: max-content;
+  max-inline-size: var(--db-sizing-3xl);
+  white-space: normal;
+  text-align: initial;
+}
+
+.db-tooltip {
+  --default-card-elevation: var(--db-elevation-sm);
+  --default-card-border-radius: var(--db-border-radius-xs);
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
+  font-style: normal;
+  font-weight: initial;
+  padding: var(--db-spacing-fixed-2xs) var(--db-spacing-fixed-xs);
+}
+.db-tooltip::after {
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+}
+.db-tooltip[data-show-arrow=true]::after {
+  content: "";
+  box-shadow: var(--db-elevation-md);
+  position: absolute;
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+  inline-size: var(--db-sizing-2xs);
+  block-size: var(--db-sizing-2xs);
+  clip-path: polygon(calc(var(--db-sizing-2xs) * -1) calc(var(--db-sizing-2xs) * -1), calc(100% + var(--db-sizing-2xs)) calc(var(--db-sizing-2xs) * -1), calc(100% + var(--db-sizing-2xs)) calc(100% + var(--db-sizing-2xs)));
+  /* stylelint-disable-next-line db-ux/use-border-radius */
+  border-radius: 0 2px;
+  transform: skew(-8deg, -8deg);
+}
+.db-tooltip:not([data-placement], [data-outside-vy])::after, .db-tooltip[data-placement^=bottom]:not([data-outside-vy])::after, .db-tooltip[data-outside-vy=top]:not([data-outside-vx])::after {
+  inset-inline-start: 50%;
+  inset-block-start: 0;
+  translate: -50% -50%;
+  rotate: 315deg;
+}
+.db-tooltip[data-placement^=top]:not([data-outside-vy])::after, .db-tooltip[data-outside-vy=bottom]:not([data-outside-vx])::after {
+  inset-inline-start: 50%;
+  inset-block-end: 0;
+  translate: -50% 50%;
+  rotate: 135deg;
+}
+.db-tooltip[data-placement^=right]:not([data-outside-vx])::after, .db-tooltip[data-outside-vx=left]::after {
+  inset-block-start: 50%;
+  inset-inline-start: 0;
+  translate: -50% -50%;
+  rotate: 225deg;
+}
+.db-tooltip[data-placement^=left]:not([data-outside-vx])::after, .db-tooltip[data-outside-vx=right]::after {
+  inset-block-start: 50%;
+  inset-inline-end: 0;
+  translate: 50% -50%;
+  rotate: 45deg;
+}
+.db-tooltip[data-emphasis=strong] {
+  background-color: var(--db-adaptive-bg-inverted-contrast-high-default);
+  color: var(--db-adaptive-on-bg-inverted-default);
+}
+.db-tooltip[data-emphasis=strong]::before {
+  --db-icon-color: var(--db-adaptive-on-bg-inverted-default);
+}
+.db-tooltip[data-emphasis=strong]::after {
+  background-color: var(--db-adaptive-bg-inverted-contrast-high-default);
+}
+
+[data-has-tooltip=true] {
+  position: relative;
+}

package/build/components/tooltip/tooltip.scss

@@ -0,0 +1,137 @@
+@use "@db-ux/core-foundations/build/styles/helpers/functions";
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/fonts";
+@use "../../styles/internal/popover-component";
+@use "../../styles/internal/component";
+
+$tooltip-arrow-shadow-size: variables.$db-sizing-2xs;
+
+.db-tooltip {
+	--default-card-elevation: #{variables.$db-elevation-sm};
+	--default-card-border-radius: #{variables.$db-border-radius-xs};
+
+	@extend %db-overwrite-font-size-sm;
+	@extend %popover-center;
+	@extend %default-popover;
+
+	background-color: colors.$db-adaptive-bg-basic-level-1-default;
+	color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
+
+	// i HTML tags browsers default styling reset
+	font-style: normal;
+
+	// surrounding tags styling reset
+	font-weight: initial;
+	padding: variables.$db-spacing-fixed-2xs variables.$db-spacing-fixed-xs;
+
+	&::after {
+		background-color: colors.$db-adaptive-bg-basic-level-1-default;
+	}
+
+	// Only for testing
+	&[data-e2e-hover="true"] {
+		@extend %show-popover;
+	}
+
+	// Arrow
+	&[data-show-arrow="true"] {
+		&::after {
+			@extend %component-border;
+
+			content: "";
+			box-shadow: variables.$db-elevation-md;
+			position: absolute;
+			background-color: colors.$db-adaptive-bg-basic-level-1-default;
+			inline-size: $tooltip-arrow-shadow-size;
+			block-size: $tooltip-arrow-shadow-size;
+			clip-path: polygon(
+				calc(#{$tooltip-arrow-shadow-size} * -1)
+					calc(#{$tooltip-arrow-shadow-size} * -1),
+				calc(100% + #{$tooltip-arrow-shadow-size})
+					calc(#{$tooltip-arrow-shadow-size} * -1),
+				calc(100% + #{$tooltip-arrow-shadow-size})
+					calc(100% + #{$tooltip-arrow-shadow-size})
+			);
+			 /* stylelint-disable-next-line db-ux/use-border-radius */
+			border-radius: 0 2px;
+			transform: skew(-8deg, -8deg);
+		}
+	}
+
+	&:not([data-placement], [data-outside-vy]),
+	&[data-placement^="bottom"]:not([data-outside-vy]),
+	&[data-outside-vy="top"]:not([data-outside-vx]) {
+		&::after {
+			inset-inline-start: 50%;
+			inset-block-start: 0;
+			translate: -50% -50%;
+			rotate: 315deg;
+		}
+	}
+
+	&[data-placement^="top"]:not([data-outside-vy]),
+	&[data-outside-vy="bottom"]:not([data-outside-vx]) {
+		&::after {
+			inset-inline-start: 50%;
+			inset-block-end: 0;
+			translate: -50% 50%;
+			rotate: 135deg;
+		}
+	}
+
+	&[data-placement^="right"]:not([data-outside-vx]),
+	&[data-outside-vx="left"] {
+		&::after {
+			inset-block-start: 50%;
+			inset-inline-start: 0;
+			translate: -50% -50%;
+			rotate: 225deg;
+		}
+	}
+
+	&[data-placement^="left"]:not([data-outside-vx]),
+	&[data-outside-vx="right"] {
+		&::after {
+			inset-block-start: 50%;
+			inset-inline-end: 0;
+			translate: 50% -50%;
+			rotate: 45deg;
+		}
+	}
+
+	&[data-emphasis="strong"] {
+		background-color: colors.$db-adaptive-bg-inverted-contrast-high-default;
+		color: colors.$db-adaptive-on-bg-inverted-default;
+
+		&::before {
+			--db-icon-color: #{colors.$db-adaptive-on-bg-inverted-default};
+		}
+
+		&::after {
+			background-color: colors.$db-adaptive-bg-inverted-contrast-high-default;
+		}
+	}
+}
+
+// Global styles
+
+@mixin show-popover($state) {
+	[data-has-tooltip="true"] {
+		&:#{$state} {
+			.db-tooltip:first-of-type {
+				@extend %show-popover;
+			}
+		}
+	}
+}
+
+[data-has-tooltip="true"] {
+	position: relative;
+}
+
+$popover-states: "hover", "focus";
+
+@each $state in $popover-states {
+	@include show-popover($state);
+}