Brutal Sharp Tooltip

HOVER_FOR_INFO

HTML_STRUCTURE

<div class='bh-misc-v1-tip' data-tip='ENCRYPTED_ID_88'>HOVER_FOR_INFO</div>

CSS_STYLING

.bh-misc-v1-tip { position: relative; display: inline-block; cursor: help; font-weight: 900; color: #00ff88; text-decoration: underline; } .bh-misc-v1-tip::after { content: attr(data-tip); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background: #fff; color: #000; padding: 5px 10px; font-size: 10px; white-space: nowrap; visibility: hidden; opacity: 0; transition: 0.2s; border: 2px solid #000; } .bh-misc-v1-tip:hover::after { visibility: visible; opacity: 1; bottom: 150%; }

// DESIGN_NOTES: Komponen ini menggunakan CSS variabel untuk memudahkan kustomisasi warna dan transisi.