1/* =Tooltips 2----------------------------------------------- */ 3 4.tooltip { 5 position: absolute; 6 display: none; /* Initially hidden, shown on hover */ 7 z-index: 1000000; /* Ensure it appears above other content */ 8 pointer-events: none; /* Allow clicks to pass through the tooltip */ 9} 10 11.tooltip-text { 12 background-color: @ini_tooltips_background_color; /* Replace with actual color value */ 13 color: @ini_tooltips_text_color; /* Replace with actual color value */ 14 text-align: center; 15 border-radius: 20px; 16 padding: 8px 16px; 17 /* Adjustments for the tooltip text itself */ 18 white-space: nowrap; 19 font-size: 12px; 20 font-weight: normal; 21 border: 2px solid @ini_tooltips_border_color; /* Replace with actual color value */ 22 /* Positioning now mainly handled by JS, so no need for left/transform here */ 23} 24.tooltip-text::after { 25 content: ""; 26 position: absolute; 27 bottom: 100%; /* Position the caret at the top of the tooltip box */ 28 left: 50%; 29 border-width: 5px; 30 border-style: solid; 31 border-color: transparent transparent @ini_tooltips_border_color transparent; /* The tip points upwards */ 32 transform: translateX(-50%); 33} 34