Tooltip by G4b413l
This tooltip was created for Tooltip Challenge
#e8e8e8
1.tooltip { 2 position: relative; 3 display: inline-block; 4 cursor: pointer; 5 background-color: #282828; 6 color: #f1f1f1; 7 padding: 1em 3em; 8 border-radius: 1em; 9} 10 11.tooltip .tooltiptext { 12 visibility: hidden; 13 width: 200px; 14 background-color: #28282817; 15 color: #282828; 16 text-align: center; 17 border-radius: 5px; 18 padding: 10px; 19 position: absolute; 20 z-index: 1; 21 bottom: 125%; 22 left: 50%; 23 transform: translateX(-50%); 24 opacity: 0; 25 transition: opacity 0.3s; 26} 27 28.tooltip:hover .tooltiptext { 29 visibility: visible; 30 opacity: 1; 31} 32 33.tooltip .tooltiptext::after { 34 content: ""; 35 position: absolute; 36 top: 100%; 37 left: 50%; 38 border-width: 8px; 39 border-style: solid; 40 border-color: #28282817 transparent transparent transparent; 41 transform: translateX(-50%); 42} 43
1.3K views
1.3K views
MIT License