.tooltip2 { /* Container for our tooltip */
    position: relative;
    display: inline-block;
}

    .tooltip2 .tooltip2-text { /* This is for the tooltip text */
        visibility: hidden;
        width: 140px;
        background-color: black;
        color: white;
        text-align: center;
        padding: 7px;
        border-radius: 5px; /* This defines tooltip text position */
        position: absolute;
        z-index: 2000;
        white-space: normal;
        word-break: break-word;
        font-size: 12px;
        line-height: 12px;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        font-weight: 400;
    }

    .tooltip2:hover .tooltip2-text { /* Makes tooltip text visible when tooltip element is hovered on */
        visibility: visible;
    }

    .tooltip2:hover .tooltip2-text:hover {
        visibility: hidden;
    }

    .tooltip2:hover .keepOnHover.tooltip2-text:hover {
        visibility: visible;
    }

.tooltip2-text.tooltip2-text-right {
    top: -50%;
    left: 150%;
}
    .tooltip2-text.tooltip2-text-right::after {
        content: " ";
        position: absolute;
        top: 50%;
        right: 100%; /* This will position the arrow on the left of the tooltip */
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent black transparent transparent; /* This will make the right border black*/
    }

.tooltip2-text.tooltip2-text-rightbottom {
    top: -50%;
    left: 150%;
}

    .tooltip2-text.tooltip2-text-rightbottom::after {
        content: " ";
        position: absolute;
        top: 5px;
        right: 100%; /* This will position the arrow on the left of the tooltip */
        border-width: 5px;
        border-style: solid;
        border-color: transparent black transparent transparent; /* This will make the right border black*/
    }

.tooltip2-text.tooltip2-text-left {
    top: -50%;
    right: 150%;
}
    .tooltip2-text.tooltip2-text-left::after {
        content: " ";
        position: absolute;
        top: 50%;
        left: 100%; /* This will position the arrow on the right of the tooltip */
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent transparent black; /* This will make the left border black*/
    }

.tooltip2-text.tooltip2-text-top {
    bottom: 150%;
    left: 15%;
    margin-left: -65px; /* This makes the margin half of the width to the center */
}
    .tooltip2-text.tooltip2-text-top::after {
        content: " ";
        position: absolute;
        top: 100%; /* This will position the arrow at the bottom of the tooltip */
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: black transparent transparent transparent; /* This will make the top border black*/
    }

.tooltip2-text.tooltip2-text-bottom {
    top: 150%;
    left: 15%;
    margin-left: -65px; /* This makes the margin half of the width to the center */
}
    .tooltip2-text.tooltip2-text-bottom::after {
        content: " ";
        position: absolute;
        bottom: 100%; /* This will position the arrow at the top of the tooltip */
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent black transparent; /* This will make the top border black */
    }