/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color:  #666666;
    color:  #FFFFFF;
    font-size:  small;
    text-align: justify;
    padding: 10px;
    border-radius: 6px;
 
    position: absolute;
    z-index: 1;
    top: -3px; /* voir padding du champ correspondant */
    left : 110%;
    opacity: 0;
    transition: opacity 1s;    
}

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    right: 100%; 
    top: 20%;
    margin-top: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent  #666666 transparent transparent;
}


/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}