👻 Boo
Boo is a JavaScript library for positioning overlay elements over target elements. This is usually used for marking selected elements, like a cursor:
To create something like that, first create an element with styles to make it look like a cursor:
<div class="rounded border border-pink-500"></div>
With this overlay element in a variable and another target element in another variable, simply create a Boo instance to make the overlay follow the target:
import Boo from 'https://cdn.skypack.dev/boo-overlays';
let boo = new Boo(overlay, () => target);
Whenever the target variable changes, Boo will update the overlay to follow it. The overlay can be enabled or disabled using the methods:
boo.enable();
boo.disable();
Other optional parameters include the container parameter, which will hold the overlay element:
let boo = new Boo(overlay, () => target, { container });
As well as the transitionClass parameter, which can be used to add a ghostly transition effect to the overlay:
let boo = new Boo(overlay, () => target, { transitionClass: 'transition-all' });