CODEWITHSUNDEEP
htmlcsstailwind-css
tony
tony

Reputation: 624

Disallowing an absolutely position element from going off screen

I am trying to make a tooltips with only Tailwind, I was able to get here:

<script src="https://cdn.tailwindcss.com"></script>


<br><br>

<div class="shrink-0 cursor-pointer px-3">
    <div class="relative flex group">
        <p>hover</p>
        <div class="absolute bottom-0 flex flex-col items-center hidden mb-6 group-hover:flex">
            <span class="relative z-10 p-2 text-xs text-gray-500 whitespace-no-wrap bg-white drop-shadow w-36">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
        </div>
    </div>
</div>

As you can see the problem is if the element is too close to any edge of the viewport, it gets cut off. How can I stop that from happening? I'm assuming it's because the element is absolutely positioned.

Upvotes: 0

Views: 1261

Answers (1)

Alvin
Alvin

Reputation: 875

If you encapsulate the group in a relative element should do the trick, it doesn't matter the height of the element. and adding a limit to width of your span/tooltip should keep it always on screen.

.tooltip_span {
  max-width: 75vw;
}
<script src="https://cdn.tailwindcss.com"></script>


<div class="shrink-0 cursor-pointer px-3">
    <div class="relative flex group">
    
      <div class="relative">
        <p>hover <br/> with more lines</p>
        <div class="absolute flex flex-col items-center hidden mb-6 group-hover:flex">
          <span class="relative z-10 p-2 text-xs text-gray-500 whitespace-no-wrap bg-white drop-shadow w-36 tooltip_span">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </span>
        </div>
      </div>

    </div>
  </div>

Upvotes: 1

Related Questions