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 를 사용하는 것을 추천하더라…

다른 글