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.