Tooltip by elijahgummer
#e8e8e8
1.tooltip-container { 2 --background-tooltip-container: #2ea44f; /* GitHub green color */ 3 position: relative; 4 background: var(--background-tooltip-container); 5 cursor: pointer; 6 transition: all 0.2s; 7 width: 16px; 8 height: 16px; 9 border-radius: 6px; 10 font-size: 17px; 11} 12 13.tooltip { 14 --background-tooltip: #6e7681; /* Default background color for tooltip */ 15 position: absolute; 16 top: -39px; /* Adjusted top position */ 17 left: 50%; 18 transform: translateX(-50%); 19 padding: 0.5em; 20 opacity: 0; 21 pointer-events: none; 22 transition: all 0.3s; 23 background: var(--background-tooltip); 24 color: white; /* Text color */ 25 border-radius: 5px; 26 width: 210px; 27 height: 30px; 28 font-size: 13px; 29 text-align: center; 30} 31 32.tooltip::before { 33 position: absolute; 34 content: ""; 35 height: 0.6em; 36 width: 0.6em; 37 bottom: -0.2em; 38 left: 50%; 39 transform: translate(-50%) rotate(45deg); 40 background: var( 41 --background-tooltip 42 ); /* Use the same background color as the tooltip */ 43} 44 45.tooltip-container:hover .tooltip { 46 opacity: 1; 47 visibility: visible; 48 pointer-events: auto; 49} 50
703 views
703 views
MIT License