Tooltip by vinodjangid07
#e8e8e8
1.tooltip-container { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5 position: relative; 6 transition: all 0.3s; 7 background-color: rgb(255, 255, 255); 8 padding: 11px 18px; 9 border-radius: 12px; 10 cursor: pointer; 11 border: 1px solid rgb(211, 211, 211); 12} 13 14.text { 15 width: 100%; 16 height: 100%; 17 display: flex; 18 align-items: center; 19 justify-content: center; 20 gap: 10px; 21 font-size: 14px; 22 font-weight: 600; 23 color: rgb(0, 0, 0); 24} 25.svgIcon { 26 width: 16px; 27 height: auto; 28} 29.tooltip { 30 position: absolute; 31 top: 0; 32 left: 50%; 33 transform: translateX(-50%); 34 padding: 0.3em 0.6em; 35 opacity: 0; 36 pointer-events: none; 37 transition: all 0.3s; 38 background-color: rgb(255, 255, 255); 39 border-radius: 12px; 40 color: rgb(34, 34, 34); 41} 42 43.tooltip::before { 44 position: absolute; 45 content: ""; 46 height: 0.6em; 47 width: 0.6em; 48 bottom: -0.2em; 49 left: 50%; 50 transform: translate(-50%) rotate(45deg); 51 background-color: rgb(255, 255, 255); 52} 53 54.tooltip-container:hover .tooltip { 55 top: -100%; 56 opacity: 1; 57 visibility: visible; 58 pointer-events: auto; 59} 60
1.2K views
1.2K views
MIT License