body 
    {
    font-family: Arial, sans-serif;
    margin: 20px;
    }

    .tooltip 
        {
        position: relative;
        display: inline-block;
        cursor: pointer;
        color: #3498db;
        text-decoration: underline;
        }

    .tooltip .tooltip-text 
        {
        visibility: hidden;
        width: 150px;
        background-color: #333;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        top: 125%; /* Position de la bulle au-dessous du mot */
        left: 50%;
        margin-left: -75px; /* Pour centrer la bulle */
        opacity: 0; /* Effet de transition */
        transition: opacity 0.3s;
        }

    .tooltip .tooltip-text::after 
        {
        content: "";
        position: absolute;
        bottom: 100%; /* Pointe de la bulle */
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #333 transparent transparent transparent;
        }

    .tooltip:hover .tooltip-text 
        {
        visibility: visible;
        opacity: 1;
        }