Sha256: 621289d828b00375e3fce1a56b892be555307e3db0a312c63e10b44403cf8a1e
Contents?: true
Size: 1.12 KB
Versions: 4
Compression:
Stored size: 1.12 KB
Contents
// Inspired by: https://github.com/excid3/tailwindcss-stimulus-components/blob/master/src/popover.js
import { Controller } from "@hotwired/stimulus";
import { createPopper } from "@popperjs/core";
import { useDebounce } from "stimulus-use";
import { useHover } from "stimulus-use";
export default class UIHoverCardController extends Controller {
static debounces = ["mouseEnter", "mouseLeave"];
static targets = ["content", "wrapper", "trigger"];
connect() {
useDebounce(this);
useHover(this, { element: this.triggerTarget });
this.popperInstance = createPopper(this.triggerTarget, this.contentTarget, {
placement: this.contentTarget.dataset.side || "bottom",
modifiers: [
{
name: "offset",
options: {
offset: [0, 8],
},
},
],
});
}
mouseEnter() {
this.popperInstance.update();
this.contentTarget.dataset.state = "open";
this.contentTarget.classList.remove("hidden");
}
mouseLeave() {
this.popperInstance.update();
this.contentTarget.dataset.state = "closed";
this.contentTarget.classList.add("hidden");
}
}
Version data entries
4 entries across 4 versions & 1 rubygems