Alpine JS Overlap

> [!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.

What It Does

- 🔍 Provides a global $overlap() method that returns true or false when
checking if elements intersect
- 🧩 Simple to use API by calling $overlap('#targetElement') to detect element
intersections

Why Use It

- 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

Install

$3

``html
defer
src="https://unpkg.com/alpinejs-overlap@latest/dist/cdn.min.js"
>


`

$3

`shell
yarn add -D alpinejs-overlap
npm install -D alpinejs-overlap
`

`js
import Alpine from 'alpinejs'
import overlap from 'alpinejs-overlap'

Alpine.plugin(overlap)

Alpine.start()
`

Example

`html