/************************************* Classes to create a hooverable tooltip *****************************************/
/* Tool tip container */
.tooltipPlaceholder {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ */
}

    /* Tooltip text */
    .tooltipPlaceholder .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: #b9b9b9;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
    }

    .tooltipPlaceholder .tooltiptext-right {
        top: -5px;
        left: 105%;
    }

        .tooltipPlaceholder .tooltiptext-right::after {
            content: " ";
            position: absolute;
            top: 50%;
            right: 100%; /* To the left of the tooltip */
            margin-top: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent black transparent transparent;
        }

    .tooltipPlaceholder .tooltiptext-left {
        top: -5px;
        right: 105%;
    }

        .tooltipPlaceholder .tooltiptext-left::after {
            content: " ";
            position: absolute;
            top: 50%;
            left: 100%; /* To the right of the tooltip */
            margin-top: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent transparent black;
        }

    .tooltipPlaceholder .tooltiptext-top {
        width: 120px;
        bottom: 100%;
        left: 50%;
        margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
    }

        .tooltipPlaceholder .tooltiptext-top::after {
            content: " ";
            position: absolute;
            top: 100%; /* At the bottom of the tooltip */
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: black transparent transparent transparent;
        }

    .tooltipPlaceholder .tooltiptext-bottom {
        width: 120px;
        top: 100%;
        left: 50%;
        margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
    }

        .tooltipPlaceholder .tooltiptext-bottom::after {
            content: " ";
            position: absolute;
            bottom: 100%; /* At the top of the tooltip */
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent black transparent;
        }
    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltipPlaceholder:hover .tooltiptext {
        visibility: visible;
    }