Using popper.js with alpinejs in livewire
This is how to use popper.js with alpinejs in a blade template in livewire. app.css app.js You can use it this way and reuse it as to use it anywhere else at an
GGAMI
This is how to use popper.js with alpinejs in a blade template in livewire. app.css app.js You can use it this way and reuse it as to use it anywhere else at an
This is how to use popper.js with alpinejs in a blade template in livewire.
#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;
}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"> 블로그 이동
You can use it this way and reuse it as popperTooltip to use it anywhere else at any time.