Tooltip by elijahgummer
#e8e8e8
1.tooltip-container { 2 --background: #22d3ee; 3 position: relative; 4 background: var(--background); 5 cursor: pointer; 6 transition: background 0.3s; 7 font-size: 17px; 8 padding: 0.7em 1.8em; 9} 10 11.tooltip { 12 position: absolute; 13 top: 100%; 14 left: 50%; 15 transform: translateX(-50%) translateY(-10%); /* Adjusted the initial position */ 16 opacity: 0; 17 pointer-events: none; 18 transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); 19 background: var(--background); 20 color: #fff; 21 border-radius: 0.3em; 22 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 23 text-align: center; 24 font-size: 14px; 25 width: 120%; /* Adjusted the width */ 26 padding: 0.5em 1em; /* Adjusted padding */ 27 white-space: nowrap; /* Prevent text wrapping */ 28} 29 30.tooltip-container:hover .tooltip { 31 top: -100%; /* Adjusted the tooltip position */ 32 opacity: 1; 33 pointer-events: auto; 34 transform: translateX(-50%) translateY(0); 35} 36
552 views
552 views
MIT License