front_end/ui/components/tooltips/tooltip.css

/*
 * Copyright 2025 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

:host {
  --tooltip-viewport-distance: var(--sys-size-5);

  /* Reset the browser's default styles for [popover] elements. */
  margin: 0;
  background: none;
  border: none;
  padding: 0;
  overflow: visible;
  position: absolute;
  max-width: var(--devtools-window-width);
  max-height: var(--devtools-window-height);
  visibility: hidden;

  & .container {
    width: max-content;
    max-width: calc(var(--devtools-window-width) - 2 * (
      /* host margin */ var(--tooltip-viewport-distance) +
      /* container horizontal padding */ var(--sys-size-8) +
      /* container margin */ var(--sys-size-3)));
    margin: var(--sys-size-2);
    font: var(--sys-typescale-body4-regular);
    color: var(--sys-color-inverse-on-surface);
    background-color: var(--sys-color-inverse-surface);
    box-shadow: var(--sys-elevation-level2);
    border-radius: var(--sys-shape-corner-extra-small);
    padding: var(--sys-size-4) var(--sys-size-5);
  }
}

:host([variant='rich']) {
  justify-self: unset;
  margin: 0 var(--tooltip-viewport-distance) var(--tooltip-viewport-distance) 0;
  position: absolute;

  & .container {
    margin-inline: 0;
    margin-block: var(--sys-size-3);
    color: var(--sys-color-on-surface);
    background-color: var(--sys-color-base-container-elevated);
    border-radius: var(--sys-shape-corner-small);
    overflow: auto;

    &.large-padding {
      padding: var(--sys-size-6) var(--sys-size-8);
    }
  }
}