<div class="tooltip-wrapper"> <div class="tooltip">blabla</div> </div> △ mouseover on red box
body{padding:50px;} .tooltip-wrapper { position: relative; width: 14px; height: 14px; background: red; } .tooltip { opacity: 0; visibility: hidden; position: absolute; bottom: 30px; left: -50px; box-sizing: border-box; margin-left: 6px; padding: 7px 15px; width: 100px; border: 1px solid #cecece; border-radius: 5px; background: #fff; font-size: 14px; text-align: center; transform: translateY(10px); transition: all .25s ease-out; box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.35); z-index: 9999 } .tooltip:after { content: ''; position: absolute; bottom: -7px; left: 50px; right: 0; display: block; margin-left: -6px; width: 12px; height: 12px; background: #fff; border: 1px solid #cecece; border-width: 0 1px 1px 0; transform: rotate(45deg); overflow: hidden; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.35); } .tooltip-wrapper:hover .tooltip { opacity: 1; visibility: visible; transform: translateY(0px); }