Check if an element is overlapping another π₯
<script defer src="https://unpkg.com/alpinejs-overlap@latest/dist/overlap.min.js" ></script> <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
yarn add -D alpinejs-overlap npm install -D alpinejs-overlap
import Alpine from 'alpinejs' import overlap from 'alpinejs-overlap' Alpine.plugin(overlap) Alpine.start()
<div class="relative"> <div id="TargetEl" class="w-32 h-32 bg-teal-700 rounded-lg"></div> <div x-data="{ isOverlap: $overlap('#TargetEl') }" x-on:resize.window="isOverlap = $overlap('#TargetEl')" :class="{ 'bg-red-700': isOverlap, 'bg-teal-700': !isOverlap }" class="absolute inset-y-0 right-0 grid w-32 h-32 rounded-lg place-content-center" > <p x-text="isOverlap ? 'Overlapping' : 'Will Overlap'" class="text-sm font-medium text-white" ></p> </div> </div>
In this example we check for an initial overlap and then use Alpine JS
resize.window listener to check while resizing the window.
See the example in action on Check Elements are Overlapping - HyperJS.