/* Copy buttons */ a.copybtn { position: absolute; top: .2em; right: .2em; width: 1em; height: 1em; opacity: .3; transition: opacity 0.5s; border: none; user-select: none; } div.highlight { position: relative; } a.copybtn > img { vertical-align: top; margin: 0; top: 0; left: 0; position: absolute; } .highlight:hover .copybtn { opacity: 1; } /** * A minimal CSS-only tooltip copied from: * https://codepen.io/mildrenben/pen/rVBrpK * * To use, write HTML like the following: * *

Short

*/ .o-tooltip--left { position: relative; } .o-tooltip--left:after { opacity: 0; visibility: hidden; position: absolute; content: attr(data-tooltip); padding: 2px; top: 0; left: -.2em; background: grey; font-size: 1rem; color: white; white-space: nowrap; z-index: 2; border-radius: 2px; transform: translateX(-102%) translateY(0); transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .o-tooltip--left:hover:after { display: block; opacity: 1; visibility: visible; transform: translateX(-100%) translateY(0); transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); transition-delay: .5s; }