Tooltip- how can I make it taller not wider?

Question

I have a question regarding the tooltip I have used from w3schools.com

I have it entirely in CSS but have the problem, that when it shows at the edge of a side, it cuts the tooltip off.

My ideal thing would be, that it detects when the side is stopping and it makes the given div taller, not wider.

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 20px;
    color: darkslategrey;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 260px;
        background-color: darkslategrey;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 16px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -80px;
       
        position: absolute;
        z-index: 1;
        font-size: 16px;
        
    }

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

         text-shadow:none;
     }

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

<span class="tooltip">The highlighted word<span class="tooltiptext">The text in my tooltip</span></span>

Thank you for any kind of help, where I could begin.