.tooltip-element {
    position:relative;
    cursor: pointer;
}

    /* Hidden by default */
    .tooltip-element::after {
        /* 1. Use data-tooltip to match the hover selector */
        content: attr(data-tooltip);
        position: absolute;
        /* 2. Position relative to the element */
        bottom: 50%;
        left: 50%;
        transform: translateX(-50%);
        background: #fff;
        color: #000;
        font-size: 11px;
        padding: 4px 8px;
        line-height: 1.2;
        border-radius: 4px;
        white-space: wrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease;
        transition-delay: 0.5s; /* Reduced from 1s for better UX */
        pointer-events: none;
        border: 1px solid #000;
        box-shadow: 0 2px 6px rgba(0,0,0,0.25);
        z-index: 99999999;
    }

    /* Show on hover IF data-tooltip is present */
    .tooltip-element[data-tooltip]:hover::after {
        opacity: 1;
        visibility: visible;
 
    }

    /* Hide if the attribute is empty */
    .tooltip-element[data-tooltip=""]::after {
        display: none;
    }