I have an element that displays a tooltip when hovered over, but when the element is on the edge of the screen, the tooltip gets cut off instead of moving to stay in the div.
What it looks like (Tooltip Clipping)
Here’s some of my code:
<div class="image">
<img src="/images/image_name.png" style="left: 100%">
<span class="tooltiptext">Marker</span>
</div>
.image {
position: absolute;
width: 13px;
height: 13px;
user-select: none;
pointer-events: auto;
transform: translateX(-50%);
}
.image .tooltiptext {
visibility: hidden;
opacity: 0;
transition: opacity 300ms;
min-width: 90px;
background-color: #000000e0;
color: white;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 2;
bottom: 100%;
left: 50%;
transform: translate(-90%, -5px);
}
.image:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
Let me know if there’s a way to fix this!
Thanks!