[data-tooltip] {
    position: relative;
}

    [data-tooltip]::after {
        content: attr(data-tooltip); /* Get content from the attribute */
        position: absolute;
        bottom: 100%; /* Position above the element */
        left: 15%;
        transform: translateX(-30%);
        background-color: lightsteelblue;
        color: black;
        padding: 5px 10px;
        border-radius: 5px;
        border: 1px solid black;
        white-space: nowrap;
        opacity: 0; /* Initially hidden */
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
    }

    [data-tooltip]:hover::after {
        opacity: 1; /* Show on hover */
        visibility: visible;
    }