.tip {
  position: relative;
  display: inline-flex;
}
.tip__bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 4px 10px;
  background: var(--foreground-primary);
  color: var(--background-primary);
  font: 500 13px/1.2 var(--font-mono);
  width: max-content;
  max-width: min(280px, calc(100vw - 64px));
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms;
}
.tip:hover .tip__bubble,
.tip:focus-within .tip__bubble {
  opacity: 1;
}
.tip[data-dismissed] .tip__bubble {
  opacity: 0;
}