livewire 에서 alpinejs 로 popper.js 사용하기

livewire 에서 blade 템플릿으로 alpinejs 를 사용하면서 popper.js 를 사용하는 방법이다.

app.css#

#tooltip {
    display: none;
}

#tooltip[data-show] {
    display: block;
}

#arrow,
#arrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
}

#arrow {
    visibility: hidden;
}

#arrow::before {
    visibility: visible;
    content: '';
    transform: rotate(45deg);
}

#tooltip[data-popper-placement^='top'] > #arrow {
    bottom: -4px;
}

#tooltip[data-popper-placement^='bottom'] > #arrow {
    top: -4px;
}

#tooltip[data-popper-placement^='left'] > #arrow {
    right: -4px;
}

#tooltip[data-popper-placement^='right'] > #arrow {
    left: -4px;
}

app.js#

import './bootstrap';
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import { createPopper } from '@popperjs/core'

<div x-data="popperTooltip({
		modifiers: [{
				name: 'offset',
				options: {
						offset: [0, 8]
				}
		}]
})" @mouseenter="show" @mouseleave="hide">				블로그 이동

이렇게 사용 할 수 있고, popperTooltip 로 재사용하여 다른 곳에서도 언제든지 사용 할 수 있다.

app.css#

app.js#

다른 글