Skip to content
This repository was archived by the owner on Mar 7, 2025. It is now read-only.

A lightweight Alpine JS plugin that adds an $overlap() utility to detect when DOM elements overlap each other 🥞

License

Notifications You must be signed in to change notification settings

markmead/alpinejs-overlap

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

CDN

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

Package

yarn add -D alpinejs-overlap
npm install -D alpinejs-overlap
import Alpine from 'alpinejs'
import overlap from 'alpinejs-overlap'

Alpine.plugin(overlap)

Alpine.start()

Example

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

About

A lightweight Alpine JS plugin that adds an $overlap() utility to detect when DOM elements overlap each other 🥞

Topics

Resources

License

Stars

Watchers

Forks