v4web-components/dist/collection/components/dialogs/lab-ds-tooltip/lab-ds-tooltip.css

Stencil Component Starter

.v4-tooltip {
  position: relative;
  display: inline-flex;
}

.tooltip-container .triangle {
  width: 1rem;
  height: 1rem;
  position: absolute;
  box-shadow: var(--lab-ds-semantic-container-shadow-l);
  z-index: -2;
  background-color: var(--lab-ds-semantic-selectable-color-bg-default);
  border-color: var(--lab-ds-semantic-selectable-color-border-default);
  border-radius: 0.5px;
  border-style: solid;
}

.tooltip-container {
  visibility: hidden;
  position: absolute;
  min-width: 8.75rem;

  z-index: 999;

  box-shadow: var(--lab-ds-semantic-container-shadow-l);

  outline-style: solid;
  outline-offset: -1px;
  outline-width: var(--lab-ds-semantic-selectable-border-width-s);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xs);
  outline-color: var(--lab-ds-semantic-selectable-color-border-default);

  color: var(--lab-ds-semantic-color-fg-default);
  font: var(--lab-ds-semantic-typography-body-none-decoration-p3-regular);
  transition: border 0.1s ease-in-out;
}

.label {
  text-align: center;
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xs);
  padding: var(--lab-ds-semantic-selectable-space-padding-m);
  background-color: var(--lab-ds-semantic-selectable-color-bg-default);
}

.v4-tooltip:hover .tooltip-container {
  visibility: visible;
}

.three-hours .tooltip-container {
  top: -50%;
  right: calc(100% + 0.6rem);
}

.three-hours .tooltip-container .triangle {
  left: calc(100% - 0.6rem);
  bottom: 35%;
  border-width: var(--lab-ds-semantic-selectable-border-width-s) var(--lab-ds-semantic-selectable-border-width-s) 0 0;
  transform: rotate(45deg);
}

.nine-hours .tooltip-container {
  top: -50%;
  left: calc(100% + 0.6rem);
}

.nine-hours .tooltip-container .triangle {
  right: calc(100% - 0.6rem);
  bottom: 35%;
  border-width: 0 0 var(--lab-ds-semantic-selectable-border-width-s) var(--lab-ds-semantic-selectable-border-width-s);
  transform: rotate(45deg);
}

.five-hours .tooltip-container {
  bottom: calc(100% + 0.6rem);
  left: 0;
  right: 0;
}

.five-hours .tooltip-container .triangle {
  top: calc(100% - 0.6rem);
  right: 15%;
  border-width: 0 0 var(--lab-ds-semantic-selectable-border-width-s) var(--lab-ds-semantic-selectable-border-width-s);
  transform: rotate(315deg);
}

.six-hours .tooltip-container {
  bottom: calc(100% + 0.6rem);
  left: 0;
  right: 0;
}

.six-hours .tooltip-container .triangle {
  top: calc(100% - 0.6rem);
  right: calc(50% - 0.5rem);
  border-width: 0 0 var(--lab-ds-semantic-selectable-border-width-s) var(--lab-ds-semantic-selectable-border-width-s);
  transform: rotate(315deg);
}

.seven-hours .tooltip-container {
  bottom: calc(100% + 0.6rem);
  left: 0;
  right: 0;
}

.seven-hours .tooltip-container .triangle {
  top: calc(100% - 0.6rem);
  left: 15%;
  border-width: 0 0 var(--lab-ds-semantic-selectable-border-width-s) var(--lab-ds-semantic-selectable-border-width-s);
  transform: rotate(315deg);
}

.eleven-hours .tooltip-container {
  top: calc(100% + 0.6rem);
  left: 0;
  right: 0;
}

.eleven-hours .tooltip-container .triangle {
  bottom: calc(100% - 0.6rem);
  left: 15%;
  border-width: 0 0 var(--lab-ds-semantic-selectable-border-width-s) var(--lab-ds-semantic-selectable-border-width-s);
  transform: rotate(135deg);
}

.twelve-hours .tooltip-container {
  top: calc(100% + 0.6rem);
  left: 0;
  right: 0;
}

.twelve-hours .tooltip-container .triangle {
  bottom: calc(100% - 0.6rem);
  right: calc(50% - 0.5rem);
  border-width: 0 0 var(--lab-ds-semantic-selectable-border-width-s) var(--lab-ds-semantic-selectable-border-width-s);
  transform: rotate(135deg);
}