Important
This plugin is no longer maintained or supported.
A lightweight Alpine JS plugin that adds an $overlap()
utility to detect when
DOM elements overlap each other.
- 🔍 Provides a global
$overlap()
method that returnstrue
orfalse
when checking if elements intersect - 🧩 Simple to use API by calling
$overlap('#targetElement')
to detect element intersections
- Create UI components that react to element overlaps
- Build drag-and-drop interfaces
- Position tooltips/dropdowns to avoid collisions
- Implement simple collision detection for interactive elements
<script
defer
src="https://unpkg.com/alpinejs-overlap@latest/dist/cdn.min.js"
></script>
<script defer src="https://unpkg.com/alpinejs@latest/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="size-96 top-8 bg-gray-900"></div>
<div
x-data="{ elementsAreOverlapping: $overlap('#TargetEl') }"
:class="{ 'bg-green-700': elementsAreOverlapping, 'bg-gray-900': !elementsAreOverlapping }"
class="absolute inset-y-0 right-0 size-96 grid place-content-center text-white"
@resize.window="elementsAreOverlapping = $overlap('#TargetEl')"
>
<p x-text="elementsAreOverlapping ? 'Overlapping' : 'Not Overlapping'"></p>
</div>
</div>