我试图使一个工具提示只有顺风，我能够得到这里：

<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>

正如你所看到的，问题是如果元素太靠近视口的任何一条边，它就会被切断。我该如何阻止这种情况的发生呢？我假设这是因为元素是绝对定位的。