如何为Tailwind CSS自定义Tooltip设置固定宽高并添加滚动条？

我基于Chrome审查元素的Tooltip效果，用Tailwind CSS开发了一个自定义Tooltip菜单，目前功能正常。但想给它设置固定宽高，当内容过多时不拉伸而是显示滚动条，添加max-w、w-等类后无效，Tooltip仍会随内容拉伸。代码如下：

<template>
  <div class="flex min-h-screen items-center justify-center bg-gray-100">
    <div class="flex flex-col gap-12 items-center">
      <div
        data-tip="Hello Tooltip 1"
        class="relative before:absolute before:content-[attr(data-tip)] before:px-3 before:py-2 before:left-1/2 before:-top-3 before:w-max before:max-w-xs before:-translate-x-1/2 before:-translate-y-full before:bg-gray-700 before:text-white before:rounded-md before:opacity-0 before:transition-all after:absolute after:left-1/2 after:-top-3 after:h-0 after:w-0 after:-translate-x-1/2 after:border-8 after:border-t-gray-700 after:border-l-transparent after:border-b-transparent after:border-r-transparent after:opacity-0 after:transition-all hover:before:opacity-100 hover:after:opacity-100"
      >
        <p>Two</p>
      </div>
    </div>
  </div>
</template>

期望效果类似Chrome审查工具的Tooltip：

问题出在before:w-max这个类——它会强制伪元素宽度完全适配内容，直接覆盖了max-w-xs的限制。只需调整伪元素的样式类，就能实现固定尺寸+滚动效果：

1. 移除before:w-max，避免宽度被内容撑开
2. 保留或设置固定宽度/最大宽度（比如before:max-w-xs）
3. 添加最大高度和滚动属性：before:max-h-32 before:overflow-y-auto，内容超出高度时自动显示垂直滚动条
4. 微调伪元素的top位置，避免滚动条和箭头视觉错位

修改后的完整代码：

<template>
  <div class="flex min-h-screen items-center justify-center bg-gray-100">
    <div class="flex flex-col gap-12 items-center">
      <div
        data-tip="这是一段很长的Tooltip内容，用来测试滚动效果：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
        class="relative before:absolute before:content-[attr(data-tip)] before:px-3 before:py-2 before:left-1/2 before:-top-4 before:max-w-xs before:max-h-32 before:overflow-y-auto before:-translate-x-1/2 before:-translate-y-full before:bg-gray-700 before:text-white before:rounded-md before:opacity-0 before:transition-all after:absolute after:left-1/2 after:-top-4 after:h-0 after:w-0 after:-translate-x-1/2 after:border-8 after:border-t-gray-700 after:border-l-transparent after:border-b-transparent after:border-r-transparent after:opacity-0 after:transition-all hover:before:opacity-100 hover:after:opacity-100"
      >
        <p>Hover Me</p>
      </div>
    </div>
  </div>
</template>

关键说明 #

• before:max-w-xs：限制Tooltip的最大宽度，超出后自动换行
• before:max-h-32：设置Tooltip的最大高度，可根据需求调整（比如max-h-40）
• before:overflow-y-auto：仅当内容超出高度时显示垂直滚动条，不影响正常内容显示
• 调整before:-top-4和after:-top-4：因为滚动条会增加元素高度，微调位置保证箭头和Tooltip的对齐

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