.tt-tooltip-wrapper {
    position: relative;
    display: inline-block; /* Or 'block' depending on your layout needs */
}

.tt-tooltip-box {
    position: absolute;
    background-color: #333; /* Dark background */
    color: #fff; /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10; /* Ensure it's above other elements */
    opacity: 0; /* Hidden by default, fade in */
    transition: opacity 0.3s;
    pointer-events: none; /* Prevent tooltip from interfering with mouse events */
    text-align: center; /* Center text */
}

/* Make tooltip visible on hover */
.tt-tooltip-wrapper:hover .tt-tooltip-box {
    opacity: 1;
}


/* Positioning */
.tt-tooltip-top {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px; /* Space between element and tooltip */
}

.tt-tooltip-bottom {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 5px;
}

.tt-tooltip-left {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 5px;
}

.tt-tooltip-right {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 5px;
}

/* Optional: Add arrows */
.tt-tooltip-box::after {
    content: '';
    position: absolute;
    border-width: 5px;
    border-style: solid;
}

.tt-tooltip-top::after {
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-color: #333 transparent transparent transparent;
}

.tt-tooltip-bottom::after {
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-color: transparent transparent #333 transparent;
}

.tt-tooltip-left::after {
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-color: transparent transparent transparent #333;
}

.tt-tooltip-right::after {
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-color: transparent #333 transparent transparent;
}

/* The problematic 'width: 100% !important;' has been removed from the selector below.
*/
.tt-tooltip-wrapper > * {
    display: inline-block; /* Ensure the tooltip wrapper behaves correctly */
}