Tooltip

.dc-tipwrap { display: flex; justify-content: center; padding: var(--dc-8) 0 var(--dc-5); font-family: var(--dc-font); }
.dc-tipwrap--low { padding: var(--dc-5) 0 var(--dc-8); }
.dc-tipwrap--text { display: block; padding: var(--dc-8) var(--dc-4) var(--dc-5); }
.dc-tip { position: relative; display: inline-flex; }
.dc-tip__btn {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-sm);
  background: var(--dc-surface); color: var(--dc-text);
  transition: background var(--dc-fast);
}
.dc-tip__btn svg { width: 20px; height: 20px; }
.dc-tip__btn:hover { background: var(--dc-sunken); }
.dc-tip__bubble {
  position: absolute; bottom: calc(100% + var(--dc-2)); left: 50%; z-index: 5;
  width: max-content; max-width: 240px;
  padding: var(--dc-2) var(--dc-3); border-radius: var(--dc-r-sm);
  background: var(--dc-text); color: var(--dc-bg);
  font-size: 12px; line-height: 1.5; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity var(--dc-fast), transform var(--dc-fast);
}
.dc-tip__arrow {
  position: absolute; top: 100%; left: 50%; width: 0; height: 0; margin-left: -5px;
  border: 5px solid transparent; border-top-color: var(--dc-text);
}
.dc-tip:hover .dc-tip__bubble,
.dc-tip:focus-within .dc-tip__bubble,
.dc-tip.is-open .dc-tip__bubble { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dc-tip__bubble--below { top: calc(100% + var(--dc-2)); bottom: auto; transform: translate(-50%, -4px); }
.dc-tip__arrow--up { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--dc-text); }
.dc-tip__sentence { max-width: 420px; margin: 0 auto; font-size: 14px; line-height: 1.9; color: var(--dc-text); }
.dc-tip__term {
  padding: 0; border: 0; background: transparent; color: var(--dc-text);
  font: inherit; text-decoration: underline dotted; text-underline-offset: .2em;
}
.dc-tip__term:hover { color: var(--dc-brand); }