Vue.js组件中实现多行自定义Tooltip的显示问题

云上老周

2026-8-26

解决Vue组件中自定义Tooltip多行内容不换行的问题

问题根源

你给Tooltip容器（.toolTip:hover + .hide）设置了display: flex，而Flex布局默认是横向排列（flex-direction: row），导致所有子div元素挤在一行，无法单独成行显示。

解决方案1：修改现有CSS

只需给Flex布局添加垂直排列属性，同时可按需设置行间距：

.hide {
    display: none;
}
    
.toolTip:hover + .hide {
    display: flex;
    flex-direction: column; /* 核心：设置子元素垂直排列 */
    gap: 8px; /* 可选：控制行与行的间距 */
    padding: 16px;
    background: rgba(9, 30, 66, 0.9);
    border-radius: 4px;
    position: relative;
    margin-top: -140px;
    text-align: left;
    line-height: 20px;
    font-weight: 400;
    font-size: 14px;
    color: #fff; /* 可选：深色背景下添加文字颜色，避免不可见 */
}

解决方案2：改用Tailwind CSS类（更贴合项目技术栈）

直接用Tailwind工具类替代自定义CSS，更简洁且符合项目规范，同时修复Vue变量渲染的写法：

<div class="relative group">
  <!-- 触发Tooltip的元素 -->
  <div>Shift ({{ i }})</div>
  
  <!-- Tooltip内容容器 -->
  <div class="hidden absolute bg-[rgba(9,30,66,0.9)] rounded px-4 py-4 text-left text-sm font-normal text-white leading-[20px] flex flex-col gap-2 -mt-[140px] group-hover:flex">
    <div class="w-full">{{ names[group] }}</div>
    <div class="w-full">
      <span class="material-icons">calendar_today</span>03 Mar 2023 - 04 Mar 2023 
    </div>
    <div class="w-full">
      <span class="material-icons">schedule</span> 08:00 - 18:00 
    </div> 
    <div class="w-full">
      <span class="material-icons">pending_actions</span> Door-to-door travel time: 6 hours
    </div>
  </div>
</div>