Pure CSS Tooltips with attr() — No Library Needed

<button data-tip="Copy to clipboard">📋</button>

[data-tip] { position: relative; }

[data-tip]::after {
  content: attr(data-tip);          /* text straight from the attribute */
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%; translate: -50% 0;
  background: #1c1c27; color: #fff;
  padding: 6px 12px; border-radius: 6px;
  font-size: 0.78rem; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .15s .3s;      /* 300ms hover intent delay */
}

[data-tip]::before {               /* the arrow */
  content: "";
  position: absolute; bottom: calc(100% + 2px); left: 50%; translate: -50% 0;
  border: 6px solid transparent; border-top-color: #1c1c27;
  opacity: 0; transition: opacity .15s .3s;
}

[data-tip]:hover::after, [data-tip]:hover::before,
[data-tip]:focus-visible::after, [data-tip]:focus-visible::before { opacity: 1; }