.rob-tooltip-wrapper {
    display: inline-block;
    position: relative;
}

.rob-tooltip-block {
    display: block;
}

.rob-tooltip-container {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.rob-tooltip-wrapper:hover .rob-tooltip-container,
.rob-tooltip-wrapper:focus-within .rob-tooltip-container {
    opacity: 1;
    visibility: visible;
}

.rob-tooltip {
    background-color: rgba(97, 97, 97, 0.92);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    white-space: nowrap;
    position: relative;
    box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
}

/* Placements */
.rob-tooltip-top { bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-8px); }
.rob-tooltip-bottom { top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); }
.rob-tooltip-left { right: 100%; top: 50%; transform: translateY(-50%) translateX(-8px); }
.rob-tooltip-right { left: 100%; top: 50%; transform: translateY(-50%) translateX(8px); }

/* Arrows attached to the inner tooltip */
.rob-tooltip-arrow .rob-tooltip::after {
    content: '';
    position: absolute;
    border-style: solid;
    border-color: transparent;
}
.rob-tooltip-top.rob-tooltip-arrow .rob-tooltip::after {
    bottom: -4px; left: 50%; transform: translateX(-50%);
    border-width: 4px 4px 0 4px; border-top-color: rgba(97, 97, 97, 0.92);
}
.rob-tooltip-bottom.rob-tooltip-arrow .rob-tooltip::after {
    top: -4px; left: 50%; transform: translateX(-50%);
    border-width: 0 4px 4px 4px; border-bottom-color: rgba(97, 97, 97, 0.92);
}
.rob-tooltip-left.rob-tooltip-arrow .rob-tooltip::after {
    right: -4px; top: 50%; transform: translateY(-50%);
    border-width: 4px 0 4px 4px; border-left-color: rgba(97, 97, 97, 0.92);
}
.rob-tooltip-right.rob-tooltip-arrow .rob-tooltip::after {
    left: -4px; top: 50%; transform: translateY(-50%);
    border-width: 4px 4px 4px 0; border-right-color: rgba(97, 97, 97, 0.92);
}