2.7K views
1/* tooltip settings π */ 2 3.copy { 4 /* button */ 5 --button-bg: #353434; 6 --button-hover-bg: #464646; 7 --button-text-color: #CCCCCC; 8 --button-hover-text-color: #8bb9fe; 9 --button-border-radius: 10px; 10 --button-diameter: 36px; 11 --button-outline-width: 1px; 12 --button-outline-color: rgb(141, 141, 141); 13 /* tooltip */ 14 --tooltip-bg: #f4f3f3; 15 --toolptip-border-radius: 4px; 16 --tooltip-font-family: Menlo, Roboto Mono, monospace; 17 /* π this field should not be empty */ 18 --tooltip-font-size: 12px; 19 /* π this field should not be empty */ 20 --tootip-text-color: rgb(50, 50, 50); 21 --tooltip-padding-x: 7px; 22 --tooltip-padding-y: 7px; 23 --tooltip-offset: 8px; 24 /* --tooltip-transition-duration: 0.3s; */ 25 /* π if you need a transition, 26 just remove the comment, 27 but I didn't like the transition :| */ 28} 29 30.copy { 31 box-sizing: border-box; 32 width: var(--button-diameter); 33 height: var(--button-diameter); 34 border-radius: var(--button-border-radius); 35 background-color: var(--button-bg); 36 color: var(--button-text-color); 37 border: none; 38 cursor: pointer; 39 position: relative; 40 outline: none; 41} 42 43.tooltip { 44 position: absolute; 45 opacity: 0; 46 visibility: 0; 47 top: 0; 48 left: 50%; 49 transform: translateX(-50%); 50 white-space: nowrap; 51 font: var(--tooltip-font-size) var(--tooltip-font-family); 52 color: var(--tootip-text-color); 53 background: var(--tooltip-bg); 54 padding: var(--tooltip-padding-y) var(--tooltip-padding-x); 55 border-radius: var(--toolptip-border-radius); 56 pointer-events: none; 57 transition: all var(--tooltip-transition-duration) cubic-bezier(0.68, -0.55, 0.265, 1.55); 58} 59 60.tooltip::before { 61 content: attr(data-text-initial); 62} 63 64.tooltip::after { 65 content: ""; 66 position: absolute; 67 bottom: calc(var(--tooltip-padding-y) / 2 * -1); 68 width: var(--tooltip-padding-y); 69 height: var(--tooltip-padding-y); 70 background: inherit; 71 left: 50%; 72 transform: translateX(-50%) rotate(45deg); 73 z-index: -999; 74 pointer-events: none; 75} 76 77.copy svg { 78 position: absolute; 79 top: 50%; 80 left: 50%; 81 transform: translate(-50%, -50%); 82} 83 84.checkmark { 85 display: none; 86} 87 88/* actions */ 89 90.copy:hover .tooltip, 91.copy:focus:not(:focus-visible) .tooltip { 92 opacity: 1; 93 visibility: visible; 94 top: calc((100% + var(--tooltip-offset)) * -1); 95} 96 97.copy:focus:not(:focus-visible) .tooltip::before { 98 content: attr(data-text-end); 99} 100 101.copy:focus:not(:focus-visible) .clipboard { 102 display: none; 103} 104 105.copy:focus:not(:focus-visible) .checkmark { 106 display: block; 107} 108 109.copy:hover, 110.copy:focus { 111 background-color: var(--button-hover-bg); 112} 113 114.copy:active { 115 outline: var(--button-outline-width) solid var(--button-outline-color); 116} 117 118.copy:hover svg { 119 color: var(--button-hover-text-color); 120}
Galahhad
Galahad
MIT License