Template:Tooltip/styles.css: Difference between revisions

Revision as of 07:03, 1 October 2025

/* Wrapper */
.tooltip { position: relative; display: inline-block; }

/* Term */
.tooltip-target { cursor: help; }

/* Dotted underline (sanitiser-safe) */
.tooltip-dotted .tooltip-target {
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

/* Popup */
.tooltip .tooltip-body {
  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;
  transform: translateY(3px);
}

/* Show on hover and on focus (no :focus-within) */
.tooltip:hover .tooltip-body,
.tooltip .tooltip-target:focus ~ .tooltip-body,
.tooltip a:focus ~ .tooltip-body,
.tooltip .tooltip-toggle:focus ~ .tooltip-body {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* “ⓘ” toggle for link case (span, not <button>) */
.tooltip .tooltip-toggle {
  margin-left: .25em;
  padding: 0 .25em;
  border: 0;
  background: none;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  color: inherit;
}

/* Basic focus ring (omit outline-offset) */
.tooltip-target:focus,
.tooltip .tooltip-toggle:focus {
  outline: 2px solid #99c2ff;
}