Is there a way to keep an element inside the boundaries of a div while still having it be position: absolute?

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)

What I want it to look like

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!