[tooltip]{ position:relative; display:inline-block; } [tooltip]::before { transition: .3s; content: ""; position: absolute; top:-6px; left:50%; transform: translateX(-50%); border-width: 4px 6px 0 6px; border-style: solid; border-color: rgba(0,0,0,0.8) transparent transparent transparent; z-index: 99; opacity:0; } [tooltip]::after { transition: .3s; white-space: nowrap; content: attr(tooltip); position: absolute; left:50%; top:-6px; transform: translateX(-50%) translateY(-100%); background: rgba(0,0,0,0.8); text-align: center; color: #fff; font-size: .875rem; min-width: 80px; max-width: 420px; border-radius: 3px; pointer-events: none; padding: 4px 8px; z-index:99; opacity:0; } [tooltip]:hover::after,[tooltip]:hover::before { opacity:1 }