User:Sur/vector.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

.stat-box-hover {
    display: none;
    position: absolute;
    top: 0;
    left: 175px; /* This is the default for larger screens */
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 10px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    border-radius: 15px;
    z-index: 1;
    max-width: 250px; /* Set a maximum width to ensure it doesn't expand too much */
}

.stat-box:hover .stat-box-hover {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 768px) {
    .stat-box-hover {
        left: 140px; /* Adjust the left position for smaller screens */
        font-size: 14px;
        max-width: 200px; /* Slightly smaller max width */
    }
}

@media (max-width: 480px) {
    .stat-box-hover {
        left: 100px; /* Further reduce the left position for very small screens */
        font-size: 12px;
        padding: 8px;
        max-width: 180px; /* Smaller max width for very small screens */
    }
}