livewire 에서 alpinejs 로 floating-ui 사용하기
Alpine.js와 Floating-UI를 활용해 툴팁을 쉽게 구현하는 방법을 소개합니다. 이 방법으로 더 나은 사용자 경험을 제공할 수 있습니다.
GGAMI
Alpine.js와 Floating-UI를 활용해 툴팁을 쉽게 구현하는 방법을 소개합니다. 이 방법으로 더 나은 사용자 경험을 제공할 수 있습니다.
일단 https://github.com/awcodes/alpine-floating-ui 패키지를 설치해준다.
.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()">
이렇게 사용해주면 된다.
검색해보니 popper.js 보다 floating-ui 를 사용하는 것을 추천하더라...