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

    .tooltip .tooltiptext
    {
        visibility: hidden;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 10px;
        padding: 5px ;
        position: absolute;
        z-index: 1000;
        bottom: 150%;
        left: 50%;
        margin-left: -80px;
    }

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

    .tooltip:hover .tooltiptext
    {
        visibility: visible;
    }