<div class="container"> <div class="label"> <span class="tooltip-toggle" data-tooltip="Sample text for your tooltip!">Hover over this </span> </div> </div>
html, body { padding: 4rem; } .container { background-color: #000; border-radius: 4px; box-shadow: 0 1px 2px 0 rgba(153, 153, 153, 0.35); padding: 1em; border: 1px solid #eee; display: block; width: 200px; color: #fff } .label { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .tooltip-toggle { cursor: pointer; position: relative; } .tooltip-toggle::before { position: absolute; top: -80px; left: -80px; background-color: green; border-radius: 5px; color: #fff; content: attr(data-tooltip); padding: 1rem; text-transform: none; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; width: 160px; } .tooltip-toggle::after { position: absolute; top: -12px; left: 9px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid green; content: " "; font-size: 0; line-height: 0; margin-left: -5px; width: 0; } .tooltip-toggle::before, .tooltip-toggle::after { color: #efefef; font-family: monospace; font-size: 16px; opacity: 0; pointer-events: none; text-align: center; } .tooltip-toggle:hover::before, .tooltip-toggle:hover::after { opacity: 1; -webkit-transition: all 0.75s ease; transition: all 0.75s ease; }