[data-tooltip] { position: relative; }

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1C1A17; color: #F2EDE4;
  font-size: 0.75rem; white-space: nowrap;
  padding: 0.375rem 0.75rem; border-radius: 0.375rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
}

[data-tooltip]:hover::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* Usage: <button data-tooltip="Description">Button</button> */