.Nvtooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;

}



    .Nvtooltip::before,
    .Nvtooltip::after {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
        pointer-events: none;
    }

    /* Tooltip text */
    .Nvtooltip::before {
        content: attr(title);
        background-color: #333333;
        color: rgb(255,255,255);
        text-align: center;
        border-radius: 6px;
        padding: 5px 10px;
        width: max-content;
        max-width: 300px;
        font-size: 14px;
        font-weight: 500;
        z-index: 1;
    }

.withdata::before {
    content: attr(data-tooltip) !important;
}
/* Tooltip arrow */
.Nvtooltip::after {
    content: "";
    border: 5px solid transparent;
}

/* Top tooltip */
.Nvtooltip-top::before {
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
}

.Nvtooltip-top::after {
    bottom: 115%;
    left: 50%;
    margin-left: -5px;
    border-top-color: #333;
}

/* Bottom tooltip */
.Nvtooltip-bottom::before {
    top: 125%;
    left: 50%;
    transform: translateX(-50%);
}

.Nvtooltip-bottom::after {
    top: 115%;
    left: 50%;
    margin-left: -5px;
    border-bottom-color: #333;
}

/* Left tooltip */
.Nvtooltip-left::before {
    top: 50%;
    right: 130%;
    transform: translateY(-50%);
}

.Nvtooltip-left::after {
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-left-color: #333;
}

/* Right tooltip */
.Nvtooltip-right::before {
    top: 50%;
    left: 125%;
    transform: translateY(-50%);
}

.Nvtooltip-right::after {
    top: 50%;
    left: 115%;
    margin-top: -5px;
    border-right-color: #333;
}

/* Show the tooltip on hover */
.Nvtooltip:hover::before,
.Nvtooltip:hover::after {
    opacity: 1;
    visibility: visible;
}