如何设置Tooltip DIV样式以匹配目标设计？

对比目标设计与当前实现，调整以下关键点即可完成匹配，以下是修改后的代码：

修改后的CSS（Tailwind） #

.tooltip-container {
  @apply absolute top-[41%] left-[calc(50%+580px)] transform -translate-x-1/2 -translate-y-1/2 z-10;
  @apply p-[16px] w-[220px] border-[1px] border-primary-blue-200 rounded-lg bg-white shadow-md;
}

.tooltip-content {
  @apply flex flex-col gap-3;
}

.tooltip-button {
  @apply text-sm font-medium rounded-md bg-primary-blue text-white px-4 py-2 ml-auto;
}

.tooltip-text {
  @apply text-[14px] font-normal leading-[20px] text-primary-blue-500 text-left;
}

修改后的HTML #

<div className="tooltip-container">
  <div className="tooltip-content">
    <span className="tooltip-text">Click on a module to edit the learning objectives</span>
    <button onClick={onClose} className="tooltip-button">
          Got it
        </button>
  </div>
</div>

关键修改说明 #

• 容器质感：新增bg-white设置白色背景、shadow-md添加阴影，还原设计中的卡片视觉效果
• 文本对齐：移除tooltip-content的items-center，给tooltip-text添加text-left，让文本左对齐匹配设计
• 按钮样式：给tooltip-button新增bg-primary-blue、text-white、px-4 py-2，将按钮改为蓝底白字样式，同时补充内边距保证按钮尺寸符合设计

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