Template:Tooltip/styles.css

/* {{pp-template}} */

/* Base: keep desktop exactly the same */
.tooltip { position: relative; display: inline; }
.tooltip-dotted { border-bottom: 1px dotted; cursor: help; }

/* --- Mobile-only synthesized tooltip (no pointer-events used) --- */
@media (hover: none) and (pointer: coarse) {

  /* Bubble text pulled from the existing title attribute */
  .tooltip[title]::after {
    content: attr(title);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    z-index: 1000;

    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 6px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    line-height: 1.2;
    font-size: 0.875em;
    max-width: 26rem;
    white-space: normal;
    text-align: left;

    opacity: 0;
    visibility: hidden;
  }

  /* Arrow */
  .tooltip[title]::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0,0,0,0.85);

    opacity: 0;
    visibility: hidden;
  }

  /* Non-link: the <span> itself is focusable (tabindex=0) */
  .tooltip:focus::after,
  .tooltip:focus::before,
  .tooltip:active::after,
  .tooltip:active::before {
    opacity: 1;
    visibility: visible;
  }

  /* Link case: focus/active land on the surrounding <a> */
  a:focus > .tooltip[title]::after,
  a:focus > .tooltip[title]::before,
  a:active > .tooltip[title]::after,
  a:active > .tooltip[title]::before {
    opacity: 1;
    visibility: visible;
  }
}

/* Reduced-motion users (nothing to transition here, so nothing needed) */