/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
    cursor: pointer;
}
    /* Base styles for the entire tooltip */
    [data-tooltip]:before,
    [data-tooltip]:after,
    .tooltip:before,
    .tooltip:after {
        position: absolute;
        visibility: hidden;
        pointer-events: none;
    }

    /* Show the entire tooltip on hover and focus */
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after,
    [data-tooltip]:focus:before,
    [data-tooltip]:focus:after,
    .tooltip:hover:before,
    .tooltip:hover:after,
    .tooltip:focus:before,
    .tooltip:focus:after {
        visibility: visible;
        opacity: 1;
    }

    /* Base styles for the tooltip's content area */
    .tooltip:after,
    [data-tooltip]:after {
        z-index: 1000;
        padding: 8px;
        min-width: initial;
        max-width: 300px;
        background-color: #000;
        color: #fff;
        content: attr(data-tooltip);
        font-size: 14px;
        border-radius: 6px;
    }