Animated Tooltip

Tooltip fades in above element on hover.

.tip { position:relative; cursor:help; }
.tip::before { content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px); background:#333; color:white; padding:6px 10px; border-radius:6px; font-size:12px; white-space:nowrap; opacity:0; pointer-events:none; transition:all 0.2s; }
.tip:hover::before { opacity:1; transform:translateX(-50%) translateY(0); }