Examples

CSS

.tooltip {
    position: relative;
    display: inline-block;
    opacity: 1;
    z-index: unset;
}

.tooltiptext {
    visibility: hidden;
    opacity: 0;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    display: block;
    z-index: 1;
    transition: .6s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
    
.tooltip-top .tooltiptext {
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}
    
.tooltip-right .tooltiptext {
    top: -5px;
    left: 105%;
}
    
.tooltip-bottom .tooltiptext {
    top: 100%;
    left: 50%;
    margin-left: -60px;
}
    
.tooltip-left .tooltiptext {
    top: -5px;
    right: 105%;
}
    
.tooltiptext::after {
    content: " ";
    position: absolute;
    border-width: 5px;
    border-style: solid;
}
    
.tooltip-top .tooltiptext::after {
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-color: black transparent transparent transparent;
}
    
.tooltip-right .tooltiptext::after {
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-color: transparent black transparent transparent;
}
    
.tooltip-bottom .tooltiptext::after {
    left: 50%;
    margin-left: -5px;
    bottom: 100%;
    border-color: transparent transparent black transparent;
}
    
.tooltip-left .tooltiptext::after {
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-color: transparent transparent transparent black;
}
                    

HTML

Top Position

<div class="tooltip tooltip-top">
    Tooltip Top
    <span class="tooltiptext">Tooltip Top</span>
</div>
                      

Right Position

<div class="tooltip tooltip-right">
    Tooltip Right
    <span class="tooltiptext">Tooltip Right</span>
</div>
                      

Bottom Position

<div class="tooltip tooltip-bottom">
    Tooltip Bottom
    <span class="tooltiptext">Tooltip Bottom</span>
</div>
                      

Left Position

<div class="tooltip tooltip-left">
    Tooltip Left
    <span class="tooltiptext">Tooltip Left</span>
</div>
                      

With HTML content

<div class="tooltip tooltip-top">
    Tooltip with HTML
    <div class="tooltiptext">
        <h5>Tooltip</h5>
        <p>HTML content</p>
    </div>
</div>
                      

Reference