在 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#

更多文章