@codegouvfr/react-dsfr/dsfr/component/tooltip/tooltip.css

French State Design System React integration library

/*!
 * DSFR v1.12.1 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
 */
@charset "UTF-8";

/* ¯¯¯¯¯¯¯¯¯ *\
  TOOLTIP
\* ˍˍˍˍˍˍˍˍˍ */
.fr-tooltip {
  --arrow-x: 0;
  display: block;
  max-width: min(24rem, calc((100vw - 2rem) * 2 / 3));
  padding: 0.5rem 0.5rem 1.25rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  opacity: 1;
  visibility: visible;
  transition: opacity 0s 0.15s, visibility 0s 0.15s;
  text-align: left;
  background-repeat: no-repeat;
  background-position: calc(50% + var(--arrow-x)) calc(100% - 0.5rem), calc(50% + var(--arrow-x)) calc(100% - 0.375rem), 50% calc(100% - 0.75rem), 50% calc(100% - 0.75rem);
  background-size: 0.5rem 0.375rem, 0.5rem 0.375rem, 100% 1px, 100% calc(100% - 0.75rem);
  white-space: normal;
  color: var(--text-default-grey);
}

.fr-tooltip:not(.fr-tooltip--shown) {
  display: none;
  opacity: 0;
}

.fr-tooltip.fr-placement--bottom {
  padding-top: 1.25rem;
  padding-bottom: 0.5rem;
  background-position-y: 0.5rem, 0.375rem, 0.75rem, 0.75rem;
}

.fr-tooltip.fr-placement {
  z-index: calc(var(--ground) + 1000);
  filter: drop-shadow(var(--overlap-shadow));
  background-image: linear-gradient(90deg, var(--background-overlap-grey), var(--background-overlap-grey));
}
@supports (background: conic-gradient(white, black)) {
  .fr-tooltip.fr-placement--top {
    background-image: conic-gradient(from -33.69deg at 50% 100%, transparent 0deg, var(--background-overlap-grey) 0deg, var(--background-overlap-grey) 67.38deg, transparent 67.38deg), conic-gradient(from -33.69deg at 50% 100%, transparent 0deg, var(--border-default-grey) 0deg, var(--border-default-grey) 67.38deg, transparent 67.38deg), linear-gradient(90deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(90deg, var(--background-overlap-grey), var(--background-overlap-grey));
  }

  .fr-tooltip.fr-placement--bottom {
    background-image: conic-gradient(from 146.31deg at 50% 0%, transparent 0deg, var(--background-overlap-grey) 0deg, var(--background-overlap-grey) 67.38deg, transparent 67.38deg), conic-gradient(from 146.31deg at 50% 0%, transparent 0deg, var(--border-default-grey) 0deg, var(--border-default-grey) 67.38deg, transparent 67.38deg), linear-gradient(90deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(90deg, var(--background-overlap-grey), var(--background-overlap-grey));
  }
}
@media (min-width: 36em) {
  /*! media sm */

  /*! media sm */
}
@media (min-width: 48em) {
  /*! media md */

  /*! media md */
}
@media (min-width: 62em) {
  /*! media lg */

  /*! media lg */
}
@media (min-width: 78em) {
  /*! media xl */

  /*! media xl */
}
@media (-ms-high-contrast: active), (forced-colors: active) {
  .fr-tooltip {
    outline: 1px solid;
    background: canvas;
  }

  .fr-tooltip.fr-placement {
    padding: 0.5rem;
  }
}
@media screen and (min-width: 0\0) and (min-resolution: 72dpi) {
  .fr-tooltip {
    position: relative;
    margin-top: 0.5rem;
    color: #3a3a3a;
  }

  .fr-tooltip.fr-placement {
    z-index: 1000;
    box-shadow: 0 0 0 1px rgba(0, 0, 18, 0.16);
    background-image: linear-gradient(90deg, #fff, #fff);
  }
}
@media print {
  .fr-tooltip {
    color: #3a3a3a;
    display: none;
  }

  .fr-tooltip.fr-placement {
    background-image: linear-gradient(90deg, #fff, #fff);
  }
}