Tooltip by theleaderofenemy
#e8e8e8
1.tooltip-container { 2 position: relative; 3 display: inline-block; 4 margin: 20px; 5} 6 7.text { 8 color: #333; 9 font-size: 18px; 10 cursor: pointer; 11} 12 13.tooltip { 14 position: absolute; 15 top: 100%; 16 left: 50%; 17 transform: translateX(-50%); 18 opacity: 0; 19 visibility: hidden; 20 background: #0b798a; 21 color: #fff; 22 padding: 10px; 23 border-radius: 4px; 24 transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s; 25 z-index: 1; 26 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 27} 28 29.tooltip::before { 30 content: ""; 31 position: absolute; 32 bottom: 100%; 33 left: 50%; 34 border-width: 8px; 35 border-style: solid; 36 border-color: transparent transparent #0b798a transparent; 37 transform: translateX(-50%); 38} 39 40.tooltip-container:hover .tooltip { 41 top: 120%; 42 opacity: 1; 43 visibility: visible; 44 background: #0e94a0; 45 transform: translate(-50%, -5px); 46} 47
1K views
1K views
MIT License