从 Popper.JS 元素隐藏/禁用箭头的简单方法

Question

我是否可以隐藏或禁用元素中的 Popper.js 箭头。

我试图从这个弹出器中隐藏箭头元素，它将出现在另一个下拉列表上方，因此它不需要箭头并且没有它看起来会更好。

下面是我的代码。

<div wire:ignore.self x-data="usePopper({
                                                                        arrow: false,
                                                                        offset: 12,
                                                                        placement: 'top-start',
                                                                        modifiers: [
                                                                            { name: 'flip', options: { fallbackPlacements: ['bottom', 'top'] } },
                                                                            { name: 'arrow', options: { fallbackPlacements: ['bottom', 'top'] } },
                                                                            { name: 'preventOverflow', options: { padding: 10 } }
                                                                        ]
                                                                    })"
                                                                        @click.outside="if(isShowPopper) isShowPopper = false"
                                                                        class="flex">
                                                                        <button wire:ignore.self x-ref="popperRef"
                                                                            @mouseover="isShowPopper = !isShowPopper"
                                                                            class="flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 text-dark-blue">
                                                                            React to message
                                                                        </button>
                                                                        <div wire:ignore.self x-ref="popperRoot"
                                                                            class="popper-root"
                                                                            :class="isShowPopper && 'show'">
                                                                            <div class="popper-box max-w-lg">
                                                                                <div
                                                                                    class="rounded-md border border-slate-400 bg-slate-200 p-4">
                                                                                    <h3
                                                                                        class="text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
                                                                                        Reactions
                                                                                    </h3>

                                                                                    <div class="mt-3 flex space-x-2">
                                                                                        <a href="#"
                                                                                            class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                                                            Tag 1
                                                                                        </a>
                                                                                        <a href="#"
                                                                                            class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                                                            Tag 2
                                                                                        </a>
                                                                                        <a href="#"
                                                                                            class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                                                            Tag 3
                                                                                        </a>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="h-4 w-4" data-popper-arrow>
                                                                                    <svg viewBox="0 0 16 9"
                                                                                        xmlns="http://www.w3.org/2000/svg"
                                                                                        class="absolute h-4 w-4"
                                                                                        fill="currentColor">
                                                                                        <path
                                                                                            class="text-slate-150 dark:text-navy-600"
                                                                                            d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z" />
                                                                                        <path
                                                                                            class="text-white dark:text-navy-700"
                                                                                            d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z" />
                                                                                    </svg>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>