body{margin:0;padding:0}[data-tooltip]{position:relative}[data-tooltip]:after{position:absolute;opacity:0;pointer-events:none;content:attr(data-tooltip);left:0;top:calc(100% + 10px);border-radius:3px;box-shadow:0 0 5px 2px hsla(0,0%,39.2%,.6);background-color:#fff;z-index:10;padding:8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-transform:translateY(-20px);transform:translateY(-20px);transition:all .15s cubic-bezier(.25,.8,.25,1)}[data-tooltip]:not([data-tooltip=""]):hover:after{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);transition-duration:.3s}