Tooltip by Cksunandh
#212121
1.tooltip-container { 2 color: #ffffff; 3 --background: #00a36d; 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: 50px; 11} 12 13.tooltip { 14 background-color: #00a36d; 15 position: absolute; 16 top: 0; 17 left: 50%; 18 transform: translateX(-50%); 19 padding: 0.3em 0.6em; 20 opacity: 0; 21 pointer-events: none; 22 transition: all 0.3s; 23 border-radius: 50px; 24} 25 26.tooltip::before { 27 background-color: #00a36d; 28 position: absolute; 29 content: ""; 30 height: 0.6em; 31 width: 0.6em; 32 bottom: -0.2em; 33 left: 50%; 34 transform: translate(-50%) rotate(45deg); 35} 36 37.tooltip-container:hover .tooltip { 38 top: -100%; 39 opacity: 1; 40 visibility: visible; 41 pointer-events: auto; 42} 43
517 views
517 views
MIT License