Tooltip by JhaveLang
This tooltip was created for Tooltip Challenge
#e8e8e8
1/* This is an example, feel free to delete this code */ 2.tooltip-container { 3 --background: linear-gradient(45deg, #22d3ee, #1f9df5); 4 position: relative; 5 background: var(--background); 6 cursor: pointer; 7 transition: all 0.2s; 8 font-size: 17px; 9 padding: 0.7em 1.8em; 10 border-radius: 8px; 11 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 12 color: #fff; 13} 14 15.tooltip { 16 position: absolute; 17 top: 100%; 18 left: 50%; 19 transform: translateX(-50%) scale(0.8); 20 transform-origin: bottom; 21 padding: 0.3em 0.6em; 22 opacity: 0; 23 pointer-events: none; 24 transition: all 0.3s; 25 background: var(--background); 26 border-radius: 4px; 27 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 28} 29 30.tooltip::before { 31 position: absolute; 32 content: ""; 33 height: 0.6em; 34 width: 0.6em; 35 bottom: -0.2em; 36 left: 50%; 37 transform: translate(-50%) rotate(45deg); 38 background: var(--background); 39} 40 41.tooltip-container:hover .tooltip { 42 top: -45px; 43 opacity: 1; 44 visibility: visible; 45 pointer-events: auto; 46 transform: translateX(-50%) scale(1); 47} 48.tooltip-container:hover { 49 transform: scale(0.9); 50} 51
1.1K views
1.1K views
MIT License