Using floating-ui with alpinejs in livewire
First, install the <https://github.com/awcodes/alpine floating ui package. app.css app.js That's how you use it. When I looked it up, I found that floating ui i
GGAMI
First, install the <https://github.com/awcodes/alpine floating ui package. app.css app.js That's how you use it. When I looked it up, I found that floating ui i
First, install the https://github.com/awcodes/alpine-floating-ui package.
.panel {
display: none;
}
.arrow {
position: absolute;
background-color: inherit;
width: 8px;
height: 8px;
transform: rotate(45deg);
}import "./bootstrap";
import { Alpine, Livewire } from "../../vendor/livewire/livewire/dist/livewire.esm";
import focus from "@alpinejs/focus";
<div x-data="floatingUI({
offset: 8,
placement: 'bottom',
arrow: {
element: $refs.arrow
}
})" @mouseenter="show()" @mouseleave="hide()">
That's how you use it.
When I looked it up, I found that floating-ui is recommended over popper.js...