Tooltip by johnliter
#e8e8e8
1/* Style for the tooltip container */ 2.tooltip-container { 3 --background-light: #ff5555; /* Red */ 4 --background-dark: #000000; /* Black */ 5 --text-color-light: #ffffff; 6 --text-color-dark: #ffffff; 7 --bubble-size: 12px; 8 --glow-color: rgba(255, 255, 255, 0.5); /* Brighter glow color */ 9 10 position: relative; 11 background: var(--background-light); 12 cursor: pointer; 13 transition: all 0.2s; 14 font-size: 17px; 15 padding: 0.7em 1.8em; 16 color: var(--text-color-light); 17 border-radius: 8px; /* Rounded edges */ 18} 19 20/* Style for the bubble tooltip */ 21.tooltip { 22 position: absolute; 23 top: -100%; /* Initially hidden above the container */ 24 left: 50%; 25 transform: translateX(-50%); 26 padding: 0.6em 1em; 27 opacity: 0; 28 visibility: hidden; 29 pointer-events: none; 30 transition: all 0.3s; 31 border-radius: var(--bubble-size); 32 background: var(--background-light); 33 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 34} 35 36/* Triangle arrow for the bubble tooltip */ 37.tooltip::before { 38 content: ""; 39 position: absolute; 40 top: 100%; 41 left: 50%; 42 transform: translate(-50%); 43 border-style: solid; 44 border-width: 8px 8px 0; 45 border-color: var(--background-light) transparent transparent; 46} 47 48/* Tooltip appearance on hover */ 49.tooltip-container:hover { 50 background: var(--background-dark); 51 color: var(--text-color-dark); 52 box-shadow: 0 0 20px var(--glow-color); /* Brighter glow effect */ 53} 54 55.tooltip-container:hover .tooltip { 56 top: -120%; /* Adjusted position for the bubble tooltip */ 57 opacity: 1; 58 visibility: visible; 59 pointer-events: auto; 60} 61
520 views
520 views
MIT License