@dialpad/dialtone-css/lib/build/less/components/tooltip.less

Dialpad's design system

//
//  DIALTONE
//  COMPONENTS: TOOLTIPS
//
//  These are tooltip classes for Dialpad's design system Dialtone.
//  For further documentation of these and other classes,
//  visit https://dialtone.dialpad.com/components/tooltips
//
//  TABLE OF CONTENTS
//  • VARIABLES
//  • BASE STYLE
//  • ALTERNATE STYLES
//  • ARROW DIRECTIONS
//    - TOP LEFT
//    - TOP CENTER
//    - TOP RIGHT
//    - RIGHT TOP
//    - RIGHT CENTER
//    - RIGHT BOTTOM
//    - BOTTOM LEFT
//    - BOTTOM CENTER
//    - BOTTOM RIGHT
//    - LEFT TOP
//    - LEFT CENTER
//    - LEFT BOTTOM
//
//  ============================================================================
//  $   BASE STYLE
//  ----------------------------------------------------------------------------

@import (inline) 'tippy.js/dist/svg-arrow.css';

.d-tooltip-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tippy-box[data-reference-hidden] {
  visibility: hidden;
  pointer-events: none;
}

.tippy-box > .tippy-svg-arrow {
  fill: var(--dt-color-surface-contrast);
}

.tippy-box[data-theme~='inverted'] > .tippy-svg-arrow {
  fill: var(--dt-color-surface-contrast-inverted);
}

.tippy-box[data-animation='fade'][data-state='hidden'] {
  opacity: 0;
}

.d-tooltip {
  //  --  COMPONENT CSS VARS
  //  -----------------------
  --tooltip-color-background: var(--dt-color-surface-contrast);
  --tooltip-color-text: var(--dt-color-foreground-primary-inverted);
  --tooltip-font-weight: var(--dt-font-weight-medium);
  --tooltip-line-height: var(--dt-font-line-height-300);
  --tooltip-padding-y: var(--dt-space-400); // 8
  --tooltip-padding-x: var(--dt-space-450); // 12
  --tooltip-border-radius: var(--dt-size-radius-300); // 4

  z-index: var(--zi-tooltip);
  max-width: var(--dt-size-875);
  padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
  color: var(--tooltip-color-text);
  font-weight: var(--tooltip-font-weight);
  font-size: var(--dt-font-size-100);
  line-height: var(--tooltip-line-height);
  letter-spacing: calc(var(--dt-space-100) * 0.25);
  text-align: center;
  overflow-wrap: break-word;
  background-color: var(--tooltip-color-background);
  border-radius: var(--tooltip-border-radius);

  &::after {
    position: absolute;
    border: var(--dt-size-350) solid transparent;
    content: '';
  }
}

//  ============================================================================
//  $   INVERTED STYLE
//  ----------------------------------------------------------------------------
.d-tooltip--inverted {
  //  --  COMPONENT CSS VARS
  //  -----------------------
  --tooltip-color-background: var(--dt-color-surface-contrast-inverted);
  --tooltip-color-text: var(--dt-color-foreground-primary);
}

//  ============================================================================
//  $   HIDE STYLE
//  ----------------------------------------------------------------------------
.d-tooltip--hide {
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0s 200ms,
    transform 200ms var(--ttf-in-out) 0s,
    opacity 200ms var(--ttf-in-out) 0s;
}

//  ============================================================================
//  $   SHOW STYLE
//  ----------------------------------------------------------------------------
.d-tooltip--show {
  transform: translate(0, 0);
  visibility: visible;
  opacity: 1;
  transition:
    visibility 0s 0s,
    transform 200ms var(--ttf-in-out) 10ms,
    opacity 200ms var(--ttf-in-out) 10ms;
}

//  ============================================================================
//  $   HOVER AND FOCUS STYLES
//  ----------------------------------------------------------------------------
.d-tooltip--hover {
  .d-tooltip {
      &:extend(.d-tooltip--hide);
  }

  &:hover,
  &:focus-visible {
      .d-tooltip {
          &:extend(.d-tooltip--show);
      }
  }
}

//  ============================================================================
//  $   TOOLTIP DIRECTIONS
//  ============================================================================
//  $$  TOP
//  ----------------------------------------------------------------------------
.d-tooltip__arrow-tippy--bottom-start,
.d-tooltip__arrow-tippy--bottom,
.d-tooltip__arrow-tippy--bottom-end,
.d-tooltip__arrow--top-left,
.d-tooltip__arrow--top-center,
.d-tooltip__arrow--top-right {
top: calc(100% + var(--dt-space-450)); // 100% + 12
transform: translateY(var(--dt-space-500)); // 16

&::after {
  top: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
  border-top-width: 0;
  border-bottom-color: var(--tooltip-color-background);
}
}

//  $$  BOTTOM
//  ----------------------------------------------------------------------------
.d-tooltip__arrow-tippy--top-start,
.d-tooltip__arrow-tippy--top,
.d-tooltip__arrow-tippy--top-end,
.d-tooltip__arrow--bottom-left,
.d-tooltip__arrow--bottom-center,
.d-tooltip__arrow--bottom-right {
bottom: calc(100% + var(--dt-space-450)); // 100% + 12
transform: translateY(var(--dt-space-500-negative)); // -16

&::after {
  bottom: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
  border-top-color: var(--tooltip-color-background);
  border-bottom-width: 0;
}
}

//  $$  TOP / BOTTOM LEFT
//  ----------------------------------------------------------------------------
.d-tooltip__arrow-tippy--bottom-start,
.d-tooltip__arrow-tippy--top-start,
.d-tooltip__arrow--top-left,
.d-tooltip__arrow--bottom-left {
left: var(--dt-space-200-negative); // -2

&::after {
  left: var(--dt-space-500); // 16
}
}

//  $$  TOP / BOTTOM CENTER
//  ----------------------------------------------------------------------------
.d-tooltip__arrow-tippy--bottom,
.d-tooltip__arrow-tippy--top,
.d-tooltip__arrow--top-center,
.d-tooltip__arrow--bottom-center {
&::after {
  left: 50%;
  margin-left: var(--dt-space-350-negative); // -6
}
}

//  $$  TOP / BOTTOM RIGHT
//  ----------------------------------------------------------------------------
.d-tooltip__arrow-tippy--bottom-end,
.d-tooltip__arrow-tippy--top-end,
.d-tooltip__arrow--top-right,
.d-tooltip__arrow--bottom-right {
right: var(--dt-space-200-negative); // -2

&::after {
  right: var(--dt-space-500); // 16
}
}

//  $$  RIGHT
//  ----------------------------------------------------------------------------
.d-tooltip__arrow-tippy--left-start,
.d-tooltip__arrow-tippy--left,
.d-tooltip__arrow-tippy--left-end,
.d-tooltip__arrow--right-top,
.d-tooltip__arrow--right-center,
.d-tooltip__arrow--right-bottom {
right: calc(100% + var(--dt-space-450)); // 100% + 12
transform: translateX(var(--dt-space-500-negative)); // -16

&::after {
  right: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
  border-right-width: 0;
  border-left-color: var(--tooltip-color-background);
}
}

//  $$  LEFT
//  ----------------------------------------------------------------------------
.d-tooltip__arrow-tippy--right-start,
.d-tooltip__arrow-tippy--right,
.d-tooltip__arrow-tippy--right-end,
.d-tooltip__arrow--left-top,
.d-tooltip__arrow--left-center,
.d-tooltip__arrow--left-bottom {
left: calc(100% + var(--dt-space-450)); // 100% + 12
transform: translateX(var(--dt-space-500)); // 16

&::after {
  left: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
  border-right-color: var(--tooltip-color-background);
  border-left-width: 0;
}
}

//  $$  RIGHT / LEFT TOP
//  ----------------------------------------------------------------------------
.d-tooltip__arrow-tippy--right-start,
.d-tooltip__arrow-tippy--left-start,
.d-tooltip__arrow--right-top,
.d-tooltip__arrow--left-top {
top: var(--dt-space-100-negative); // -1

&::after {
  top: var(--dt-space-400); // 8
}
}

//  $$  RIGHT / LEFT CENTER
//  ----------------------------------------------------------------------------
.d-tooltip__arrow-tippy--right,
.d-tooltip__arrow-tippy--left,
.d-tooltip__arrow--right-center,
.d-tooltip__arrow--left-center {
&::after {
  top: 50%;
  margin-top: var(--dt-space-350-negative); // -6
}
}

//  $$  RIGHT / LEFT BOTTOM
//  ----------------------------------------------------------------------------
.d-tooltip__arrow-tippy--right-end,
.d-tooltip__arrow-tippy--left-end,
.d-tooltip__arrow--right-bottom,
.d-tooltip__arrow--left-bottom {
bottom: var(--dt-space-100-negative); // -1

&::after {
  bottom: var(--dt-space-400); // 8
}
}