如何为@headlessui/vue的PopoverPanel添加指向文本的Tailwind CSS指针

要给HeadlessUI的PopoverPanel添加指向悬停文本的指针，直接用CSS伪元素就能实现，不需要额外组件。以下是具体实现步骤和修改后的代码：

核心思路 #

利用CSS的::before伪元素创建三角形箭头，通过绝对定位将其固定在PopoverPanel的对应位置，让箭头精准指向触发hover的文本。

修改后的完整代码 #

<template>
  <Popover v-slot="{ open, close }" class="relative inline-block">
    <PopoverButton class="focus:outline-none">
      <p
        @mouseover.native.stop.prevent="hoverPopover($event, open)"
        @mouseleave.native.stop.prevent="closePopover($event, close)"
      >
        Hover ME
      </p>
    </PopoverButton>

    <PopoverPanel
      class="absolute z-50 bg-gray-700 rounded-lg text-white px-3 py-2 text-sm font-normal inline-block ring-1 ring-black ring-opacity-5 focus:outline-none tooltip-panel mt-2"
      @mouseover.native.stop.prevent="popoverHover = true"
      @mouseleave.native.stop.prevent="closePopover($event, close)"
    >
      <slot> Text to be shown on hover over </slot>
    </PopoverPanel>
  </Popover>
</template>

<script setup>
import { Popover, PopoverButton, PopoverPanel, Portal } from "@headlessui/vue";

const popoverHover = ref(false);
const popoverTimeout = ref();

const hoverPopover = (e, open) => {
  popoverHover.value = true;
  if (!open) {
    e.target.parentNode.click();
  }
};

const closePopover = (e, close) => {
  popoverHover.value = false;
  if (popoverTimeout.value) clearTimeout(popoverTimeout.value);
  popoverTimeout.value = setTimeout(() => {
    if (!popoverHover.value) {
      close();
    }
  }, 100);
};
</script>

<style scoped>
.tooltip-panel {
  position: relative;
}
/* 顶部居中箭头，指向下方的悬停文本 */
.tooltip-panel::before {
  content: '';
  position: absolute;
  bottom: 100%; /* 将箭头定位在tooltip顶部 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  /* 箭头大小 */
  border-width: 5px;
  border-style: solid;
  /* 箭头颜色：下边框与tooltip背景一致，其余透明 */
  border-color: transparent transparent bg-gray-700 transparent;
}
</style>

调整箭头方向的方法 #

如果需要箭头指向其他方向，只需修改伪元素的定位和边框颜色：

• 箭头在右侧指向左侧：

  .tooltip-panel::before {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-color: transparent transparent transparent bg-gray-700;
  }
  

• 箭头在底部指向上方：

  .tooltip-panel::before {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-color: bg-gray-700 transparent transparent transparent;
  }
  

额外说明 #

• mt-2类是给tooltip和触发文本之间添加间距，避免箭头贴得过近
• 伪元素的border-width可以调整箭头的大小，数值越大箭头越粗

内容的提问来源于stack exchange，提问作者BATMAN_2008