@roadtrip/css/styles/components/_tooltip.css

CSS framework for Roadtrip Design System

/*
 * Tooltip
 *
 * Fit Tooltip for short text only.
 *
 * Index
 * - Tooltip
 * - Tooltip position
 *
 */


/* TOOLTIP
 -------------------- */

[tooltip] {
  position: relative;
}

[tooltip]::after {
  position: absolute;
  top: -0.5rem;
  left: 50%;
  z-index: 1;
  width: max-content;
  min-width: 6rem;
  padding: 0.5rem;
  font-family: var(--road-font);
  font-size: var(--road-body-small);
  color: var(--road-on-surface);
  text-align: center;
  pointer-events: none;
  content: attr(tooltip);
  background: var(--road-surface);
  border: 1px solid var(--road-outline-weak);
  border-radius: 0.25rem;
  box-shadow: var(--road-elevation-low);
  opacity: 0;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  transform: translateX(-50%) translateY(-100%);
}

[tooltip].tooltip-text-left::after {
  text-align: left;
}

[tooltip]:hover::after,
[tooltip]:focus-within::after {
  opacity: 1;
}

/* TOOLTIP POSITION
 -------------------- */

/**
 * Top position
 */

[tooltip-position="top"]::after {
  left: 50%;
  transform: translateX(-50%) translateY(-70%);
}

[tooltip-position="top"]:hover::after {
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
}

/**
 * Top Left
 */

[tooltip-position="top-left"]::after {
  left: 0%;
  transform: translateY(-70%);
}

[tooltip-position="top-left"]:hover::after {
  transform: translateY(-100%);
}


/**
 * Top Right
 */


[tooltip-position="top-right"]::after {
  left: 50%;
  transform: translateY(-70%);
}

[tooltip-position="top-right"]:hover::after {
  left: 100%;
  transform: translateY(-100%);
}

/**
 * Top end
 */

[tooltip-position="top-end"]::after {
  left: auto;
  right: 0%;
  transform: translateY(-70%);
}

[tooltip-position="top-end"]:hover::after {
  transform: translateY(-100%);
}


/**
 * Left position
 */

[tooltip-position="left"]::after {
  top: 50%;
  left: 0%;
  margin-right: 0.5rem;
  transform: translateX(-94%) translateY(-55%);
}

[tooltip-position="left"]:hover::after {
  transform: translateX(-103%) translateY(-55%);
}

/**
 * Bottom position
 */

[tooltip-position="bottom"]::after {
  top: 100%;
  left: 50%;
  margin-top: 0.5rem;
  transform: translateX(-50%) translateY(-40%);
}

[tooltip-position="bottom"]:hover::after {
  transform: translateX(-50%) translateY(-6%);
}

/**
 * Bottom Left
 */


[tooltip-position="bottom-left"]::after {
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  transform: translateY(-40%);
}

[tooltip-position="bottom-left"]:hover::after {
  transform: translateY(-6%);
}


/**
 * Bottom Right
 */

[tooltip-position="bottom-right"]::after {
  top: 100%;
  left: 100%;
  margin-top: 0.5rem;
  transform: translateY(-40%);
}

[tooltip-position="bottom-right"]:hover::after {
  transform: translateY(-6%);
}




/**
 * Bottom end
 */

[tooltip-position="bottom-end"]::after {
  top: 100%;
  right: 0;
  left: auto;
  margin-top: 0.5rem;
  transform: translateY(-40%);
}

[tooltip-position="bottom-end"]:hover::after {
  transform: translateY(-6%);
}


/**
 * Right position
 */

[tooltip-position="right"]::after {
  top: 50%;
  left: 100%;
  margin-left: 0.5rem;
  transform: translateX(-14%) translateY(-55%);
}

[tooltip-position="right"]:hover::after {
  transform: translateX(-4%) translateY(-55%);
}