Template:Tooltip/styles.css

/* Keep same inline look; we only add a pseudo tooltip */
.tooltip { position: relative; cursor: help; }

/* Dotted option without text-underline-offset */
.tooltip-dotted { border-bottom: 1px dotted currentColor; }
.tooltip-dotted a,
.tooltip-dotted .rt-commentedText { border-bottom: inherit; }

/* Draw tooltip using the attribute text; no native title anymore */
.tooltip::after {
  content: attr(data-title);
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 6px;
  padding: 6px 8px;
  background: #222;
  color: #fff;
  border-radius: 6px;
  font-size: 0.875em;
  line-height: 1.35;
  max-width: 90vw;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  z-index: 1000;

  opacity: 0;
  visibility: hidden;
}

/* Show on hover (desktop) */
.tooltip:hover::after { opacity: 1; visibility: visible; }

/* Show on focus (click/tap for non-links with tabindex=0) */
.tooltip:focus::after { opacity: 1; visibility: visible; }

/* Basic focus ring; outline-offset is not allowed, so keep it simple */
.tooltip:focus { outline: 2px solid #99c2ff; }