Tooltip by SmookyDev
#e8e8e8
1.tooltip { 2 position: relative; 3 display: inline-block; 4 cursor: pointer; 5 font-family: "Arial", sans-serif; 6} 7 8.tooltip:hover .tooltiptext { 9 visibility: visible; 10 opacity: 1; 11} 12 13.tooltiptext { 14 visibility: hidden; 15 width: 200px; 16 background-color: #333; 17 color: #fff; 18 text-align: center; 19 border-radius: 5px; 20 padding: 10px; 21 position: absolute; 22 z-index: 1; 23 top: 125%; 24 left: 50%; 25 margin-left: -100px; 26 opacity: 0; 27 transition: opacity 0.3s; 28} 29 30.tooltiptext::after { 31 content: ""; 32 position: absolute; 33 top: -10px; 34 left: 50%; 35 margin-left: -10px; 36 border-width: 10px; 37 border-style: solid; 38 border-color: transparent transparent #333 transparent; 39} 40 41.tooltip .icon { 42 display: inline-block; 43 width: 20px; 44 height: 20px; 45 background-color: #4caf50; 46 color: #fff; 47 border-radius: 50%; 48 text-align: center; 49 line-height: 20px; 50} 51
1.5K views
1.5K views
MIT License