@telekom/scale-components/dist/collection/components/tooltip/tooltip.css

Scale is the digital design system for Telekom products and experiences.

/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

:host {
  /* tooltip */
  --radius: var(--telekom-radius-small);
  --background: var(--telekom-color-background-surface-highlight);
  --color: var(--telekom-color-text-and-icon-white-standard);
  --font-weight: var(--telekom-typography-font-weight-regular);
  --font-size: var(--telekom-typography-font-size-body);
  --line-height: var(--telekom-typography-line-spacing-standard);
  --spacing: var(--telekom-spacing-composition-space-02)
    var(--telekom-spacing-composition-space-04);

  /* arrow */
  --arrow-size: 12px;

  /* tooltip hide */
  --transition-delay-hide: var(--telekom-motion-duration-instant);
  --transition-duration-hide: var(--telekom-motion-duration-immediate);
  --transition-timing-function-hide: var(--telekom-motion-easing-standard);

  /* tooltip show */
  --transition-duration-show: var(--telekom-motion-duration-immediate);
  --transition-timing-function-show: var(--telekom-motion-easing-standard);
  --z-index: var(--scl-z-index-70);

  display: contents;
  position: relative;
  box-sizing: border-box;
}

[part='tooltip'] {
  position: absolute;
  z-index: var(--z-index);
  top: 0;
  left: 0;
  background: var(--background);
  color: var(--color);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  line-height: var(--line-height);
  padding: var(--spacing);
  border-radius: var(--radius);
  transition-property: opacity;
  transition-duration: var(--transition-duration-show);
  transition-timing-function: var(--transition-timing-function-show);
}

[part='tooltip'][aria-hidden='true'] {
  opacity: 0;
  transition-delay: var(--transition-delay-hide);
  transition-duration: var(--transition-duration-hide);
  transition-timing-function: var(--transition-timing-function-hide);
  pointer-events: none;
}

[part='trigger'] {
  /*display: flow-root;*/
}

[part='arrow'] {
  position: absolute;
  z-index: -1; /* always below the text */
  background: var(--background);
  width: var(--arrow-size);
  height: var(--arrow-size);
  transform: rotate(45deg);
}

@media screen and (-ms-high-contrast: active) {
  [part='tooltip'] {
    border: 1px solid yellow;
  }
}