Shopify Dawn主题鼠标悬停弹出文本效果开发求助

需求说明 #

使用Shopify Dawn主题搭建网站，需实现：带编号的圆形搭配简短文字，鼠标悬停圆形时，旁边显示详细描述文本。

现有问题 #

• 悬停文本呈单列显示，无法匹配目标样式
• 多个按钮的悬停文本弹出位置不一致，新增按钮后也需保持统一位置
• 缺少带编号的圆形组件，且未实现悬停时圆形填充为黑色的效果

解决方案代码 #

<body>
  <div class="feature-item">
    <div class="tooltip-wrapper">
      <div class="number-circle">1</div>
      <span class="short-text">NO EFFORT</span>
      <div class="tooltip-content">
        <h3>NO EFFORT</h3>
        <p>Leave it in for just a few hours or overnight, to curl your hair while you sleep!</p>
      </div>
    </div>
  </div>

  <div class="feature-item">
    <div class="tooltip-wrapper">
      <div class="number-circle">2</div>
      <span class="short-text">NO HEAT = NO DAMAGE</span>
      <div class="tooltip-content">
        <h3>NO HEAT = NO DAMAGE</h3>
        <p>Get the healthiest, biggest, bounciest curls you've ever had without any of the extreme damage caused by heated hair tools.</p>
      </div>
    </div>
  </div>

  <style>
    .feature-item {
      margin: 2rem 0;
      display: flex;
      align-items: center;
    }

    .tooltip-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      gap: 0.8rem;
      cursor: pointer;
    }

    /* 带编号的圆形样式 */
    .number-circle {
      width: 36px;
      height: 36px;
      border: 2px solid #000;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      transition: all 0.3s ease;
    }

    .tooltip-wrapper:hover .number-circle {
      background-color: #000;
      color: #fff;
    }

    .short-text {
      font-weight: 600;
    }

    /* 悬停详情文本样式 */
    .tooltip-content {
      visibility: hidden;
      opacity: 0;
      position: absolute;
      left: 120%;
      top: 50%;
      transform: translateY(-50%);
      width: 280px;
      padding: 1rem;
      background-color: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      border-radius: 8px;
      transition: opacity 0.3s ease;
      z-index: 10;
    }

    .tooltip-wrapper:hover .tooltip-content {
      visibility: visible;
      opacity: 1;
    }

    .tooltip-content h3 {
      margin: 0 0 0.5rem 0;
      font-size: 1.1rem;
    }

    .tooltip-content p {
      margin: 0;
      line-height: 1.5;
      color: #666;
    }
  </style>
</body>

问题逐一解决说明 #

1. 悬停文本样式优化

   • 调整tooltip宽度为280px，设置内边距和阴影，给内容足够排版空间
   • 移除多余空标签，设置标题、正文的间距与行高，采用左对齐匹配目标样式
   • 添加过渡动画，让tooltip显示/隐藏更平滑

2. 统一弹出位置

   • 将tooltip定位基准设为.tooltip-wrapper，用top: 50%+transform: translateY(-50%)实现垂直居中
   • 固定left: 120%，确保所有tooltip都显示在触发元素右侧同一位置，新增元素无需额外调整

3. 带编号圆形实现

   • 创建.number-circle类，通过宽高、边框、圆角实现圆形外观，用flex布局让编号居中
   • 添加hover状态样式，切换背景色为黑色、文字色为白色
   • 使用flex布局排列圆形和简短文字，保持整体排版整齐

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