1/** 2 * css for DokuWiki plugin 'codebuttonmod2' 3 * 4 */ 5 6a.copybtn { 7 position: absolute; 8 top: .2em; 9 right: .2em; 10 width: 1em; 11 height: 1em; 12 opacity: .3; 13 transition: opacity 0.5s; 14} 15 16a.copybtn > img { 17 vertical-align: top; 18} 19 20.pre_wrap:hover .copybtn { 21 opacity: 1; 22} 23 24/** 25 * A minimal CSS-only tooltip copied from: 26 * https://codepen.io/mildrenben/pen/rVBrpK 27 * 28 * To use, write HTML like the following: 29 * 30 * <p class="o-tooltip--left" data-tooltip="Hey">Short</p> 31 */ 32 33.o-tooltip--left { 34 position: relative; 35 } 36 37.o-tooltip--left:after { 38 opacity: 0; 39 visibility: hidden; 40 position: absolute; 41 content: attr(data-tooltip); 42 padding: 2px; 43 top: 0; 44 left: -.2em; 45 background: grey; 46 font-size: 1rem; 47 color: white; 48 white-space: nowrap; 49 z-index: 2; 50 border-radius: 2px; 51 transform: translateX(-102%) translateY(0); 52 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); 53} 54 55.o-tooltip--left:hover:after { 56 display: block; 57 opacity: 1; 58 visibility: visible; 59 transform: translateX(-100%) translateY(0); 60 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); 61 transition-delay: .5s; 62} 63