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