Tooltip by gouthamnetha02
#e8e8e8
1.tooltip { 2 position: relative; 3 display: inline-block; 4 cursor: pointer; 5} 6 7.tooltip button { 8 background-color: #db3434; 9 color: #fff; 10 border: none; 11 padding: 10px 20px; 12 border-radius: 5px; 13 font-size: 16px; 14 cursor: pointer; 15 transition: background-color 0.3s, transform 0.2s ease-out; 16} 17 18.tooltip button:hover { 19 background-color: #b92929; 20 transform: scale(1.05); 21} 22 23.tooltip:hover .tooltiptext { 24 visibility: visible; 25 opacity: 1; 26} 27 28.tooltiptext { 29 visibility: hidden; 30 width: 160px; 31 background-color: #333; 32 color: #fff; 33 text-align: center; 34 border-radius: 8px; 35 padding: 5px; 36 position: absolute; 37 z-index: 1; 38 bottom: 125%; 39 left: 50%; 40 margin-left: -80px; 41 opacity: 0; 42 transition: opacity 0.3s; 43} 44 45.tooltiptext::after { 46 content: ""; 47 position: absolute; 48 top: 100%; 49 left: 50%; 50 margin-left: -5px; 51 border-width: 5px; 52 border-style: solid; 53 border-color: #333 transparent transparent transparent; 54} 55
940 views
940 views
MIT License