[Summary view] [Print] [Text view]

   1  /* Accessible tooltip component. Markup from wp_get_tooltip(). */
   2  
   3  .wp-tooltip {
   4      display: inline-flex;
   5      align-items: center;
   6  }
   7  
   8  /* Toggle and close buttons. */
   9  .wp-tooltip .wp-tooltip__toggle,
  10  .wp-tooltip .wp-tooltip__close {
  11      display: inline-flex;
  12      align-items: center;
  13      justify-content: center;
  14      width: 24px;
  15      height: 24px;
  16      padding: 0;
  17      border: 0;
  18      border-radius: 2px;
  19      background: none;
  20      color: #50575e;
  21      cursor: pointer;
  22  }
  23  
  24  .wp-tooltip:not(:has(button[aria-disabled="true"],button[disabled])) .wp-tooltip__toggle:hover,
  25  .wp-tooltip:not(:has(button[aria-disabled="true"],button[disabled])) .wp-tooltip__toggle:focus,
  26  .wp-tooltip .wp-tooltip__close:hover,
  27  .wp-tooltip .wp-tooltip__close:focus {
  28      color: var(--wp-admin-theme-color, #3858e9);
  29  }
  30  
  31  /*
  32   * `:where()` keeps the wrapper out of the specificity total, so buttons
  33   * passed into a tooltip keep control of their own focus ring.
  34   */
  35  :where(.wp-tooltip:not(:has(button[aria-disabled="true"],button[disabled]))) .wp-tooltip__toggle:focus,
  36  .wp-tooltip .wp-tooltip__close:focus {
  37      outline: 2px solid transparent;
  38      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
  39  }
  40  
  41  .wp-tooltip .wp-tooltip__toggle .dashicons {
  42      width: 20px;
  43      height: 20px;
  44      font-size: 20px;
  45  }
  46  
  47  .wp-tooltip .wp-tooltip__close .dashicons {
  48      width: 18px;
  49      height: 18px;
  50      font-size: 18px;
  51  }
  52  
  53  /* Bubble. No position here, so it falls back to the UA's centered popover without anchoring. */
  54  .wp-tooltip .wp-tooltip__bubble {
  55      max-width: min(280px, calc(100vw - 32px));
  56      margin: auto;
  57      padding: 12px 16px;
  58      overflow: visible;
  59      border: 1px solid #c3c4c7;
  60      border-radius: 4px;
  61      background: #fff;
  62      color: #1d2327;
  63      font-size: 13px;
  64      font-weight: 400;
  65      line-height: 1.5;
  66      text-align: left;
  67      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  68  }
  69  
  70  .wp-tooltip.wp-is-tooltip .wp-tooltip__bubble {
  71      background: #000;
  72      color: #f0f0f0;
  73      text-align: center;
  74      padding: 4px 8px;
  75      line-height: 1.4;
  76  }
  77  
  78  .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__text {
  79      display: block;
  80      padding-inline-end: 24px;
  81  }
  82  
  83  .wp-tooltip .wp-tooltip__close {
  84      position: absolute;
  85      top: 6px;
  86      inset-inline-end: 6px;
  87  }
  88  
  89  /* Anchor the bubble above its toggle, with a downward arrow. */
  90  @supports (anchor-name: --a) {
  91      .wp-tooltip .wp-tooltip__bubble {
  92          position-area: top;
  93          margin: 0 0 8px;
  94          position-try-fallbacks: flip-block, flip-inline;
  95      }
  96  
  97      .wp-tooltip.wp-is-tooltip .wp-tooltip__bubble {
  98          margin: 0;
  99      }
 100  
 101      /* Arrow: gray border (::before) under a white fill (::after). */
 102      .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::before,
 103      .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::after {
 104          content: "";
 105          position: absolute;
 106          top: 100%;
 107          left: 50%;
 108          width: 0;
 109          height: 0;
 110          border: 8px solid transparent;
 111          border-bottom: 0;
 112      }
 113  
 114      .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::before {
 115          margin-left: -8px;
 116          border-top-color: #c3c4c7;
 117      }
 118  
 119      .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::after {
 120          margin-left: -7px;
 121          border-width: 7px;
 122          border-bottom: 0;
 123          border-top-color: #fff;
 124      }
 125  }