chrome-devtools-frontend/front_end/ui/components/tooltips/tooltip.css

Chrome DevTools UI

/*
 * Copyright 2025 The Chromium Authors. All rights reserved.
 * 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-area: bottom;
  position-visibility: anchors-visible;
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
  justify-self: anchor-center;
  position-try-fallbacks: flip-block;

  & .container {
    width: max-content;
    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;
  position-area: bottom span-right;
  position-try-fallbacks: --bottom-left, --bottom-center, --top-right, --top-left, --top-center;
  left: unset;
  right: var(--devtools-window-right);
  top: unset;
  bottom: var(--devtools-window-bottom);
  max-width: var(--devtools-window-width);
  max-height: var(--devtools-window-height);

  & .container {
    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-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);
    padding: var(--sys-size-6) var(--sys-size-8);
    overflow: auto;
  }
}

@position-try --bottom-left {
  /* stylelint-disable-next-line at-rule-descriptor-no-unknown */
  position-area: bottom span-left;
  margin: 0 0 var(--tooltip-viewport-distance) var(--tooltip-viewport-distance);
  left: var(--devtools-window-left);
  /* stylelint-disable-next-line at-rule-descriptor-value-no-unknown */
  right: unset;
  /* stylelint-disable-next-line at-rule-descriptor-value-no-unknown */
  top: unset;
  bottom: var(--devtools-window-bottom);
}

@position-try --top-right {
  /* stylelint-disable-next-line at-rule-descriptor-no-unknown */
  position-area: top span-right;
  margin: var(--tooltip-viewport-distance) var(--tooltip-viewport-distance) 0 0;
  top: var(--devtools-window-top);
  /* stylelint-disable-next-line at-rule-descriptor-value-no-unknown */
  bottom: unset;
}

@position-try --top-left {
  /* stylelint-disable-next-line at-rule-descriptor-no-unknown */
  position-area: top span-left;
  margin: var(--tooltip-viewport-distance) 0 0 var(--tooltip-viewport-distance);
  left: var(--devtools-window-left);
  /* stylelint-disable-next-line at-rule-descriptor-value-no-unknown */
  right: unset;
  top: var(--devtools-window-top);
  /* stylelint-disable-next-line at-rule-descriptor-value-no-unknown */
  bottom: unset;
}

@position-try --bottom-center {
  justify-self: right;
  /* stylelint-disable-next-line at-rule-descriptor-no-unknown */
  position-area: bottom;
  margin: 0 var(--tooltip-viewport-distance) var(--tooltip-viewport-distance)
    var(--tooltip-viewport-distance);
  left: if(style(--devtools-window-left: 0): unset; else: var(--devtools-window-left));
  right: if(style(--devtools-window-right: 0): unset; else: var(--devtools-window-right));
  /* stylelint-disable-next-line at-rule-descriptor-value-no-unknown */
  top: unset;
  bottom: var(--devtools-window-bottom);
}

@position-try --top-center {
  justify-self: right;
  /* stylelint-disable-next-line at-rule-descriptor-no-unknown */
  position-area: top;
  margin: var(--tooltip-viewport-distance) var(--tooltip-viewport-distance) 0
    var(--tooltip-viewport-distance);
  left: if(style(--devtools-window-left: 0): unset; else: var(--devtools-window-left));
  right: if(style(--devtools-window-right: 0): unset; else: var(--devtools-window-right));
  top: var(--devtools-window-top);
  /* stylelint-disable-next-line at-rule-descriptor-value-no-unknown */
  bottom: unset;
}