livewire 에서 alpinejs 로 floating-ui 사용하기
Updated on
일단 https://github.com/awcodes/alpine-floating-ui 패키지를 설치해준다.
app.css
.panel { display: none; } .arrow { position: absolute; background-color: inherit; width: 8px; height: 8px; transform: rotate(45deg); }
app.js
import "./bootstrap"; import { Alpine, Livewire } from "../../vendor/livewire/livewire/dist/livewire.esm"; import focus from "@alpinejs/focus"; import AlpineFloatingUI from "@awcodes/alpine-floating-ui"; import.meta.glob([ "../assets/**", "../images/**", "../fonts/**" ]); Alpine.plugin(focus); Alpine.plugin(AlpineFloatingUI); // Initialize floatingUI functionality document.addEventListener("alpine:init", () => { Alpine.data("floatingUI", (options = {}) => ({ show() { this.$float({ ...options }, { trap: true }); }, hide() { this.$refs.panel.style.display = "none"; } })); }); Livewire.start();
<div x-data="floatingUI({ offset: 8, placement: 'bottom', arrow: { element: $refs.arrow } })" @mouseenter="show()" @mouseleave="hide()"> <a href="https://ggami.net" target="_blank" rel="noopener noreferrer" class="text-main-base hover:text-main-base flex items-center rounded-full p-1 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500"> <span class="sr-only">Open blog</span> <x-svg.icon class="size-6" /> </a> <div x-ref="panel" class="panel absolute z-10 rounded bg-gray-900 px-2 py-1 text-sm text-white shadow-md"> <p>블로그 이동</p> <div x-ref="arrow" class="arrow"></div> </div> </div>
이렇게 사용해주면 된다.
검색해보니 popper.js 보다 floating-ui 를 사용하는 것을 추천하더라…