LivewireでAlpine.jsからPopper.jsを使う

LivewireでBladeテンプレートを使ってAlpine.jsを利用しながら、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#

ほかの記事