如何仅用CSS3创建响应式工具提示并实现动态居中定位？

我刚好处理过类似的需求，完全可以用纯CSS搞定，而且不会破坏段落布局，也不会让tooltip占用多余空间。下面是具体的实现步骤和代码：

核心思路 #

关键是利用绝对定位+transform平移来实现动态宽度元素的居中，同时通过inline-block保证目标词不打乱段落流：

• 把包含目标词和tooltip的容器（.word）设为inline-block+position: relative，既不影响段落布局，又能作为tooltip的定位参考；
• tooltip（.definition）用position: absolute脱离文档流，这样就不会占用多余空间；
• 通过bottom: 100%把tooltip放在目标词上方，再用left: 50%+transform: translateX(-50%)实现水平居中——这个组合对动态宽度的元素特别友好，不管目标词多长，tooltip都能完美对齐；
• 用opacity或visibility控制tooltip的显示/隐藏（比display: none更适合加过渡动画）。

完整代码示例 #

HTML结构（优化后更适配行内文本场景）

<p>
  lorem 
  <span class="word">
    ipsum
    <span class="definition">this will be the tooltip text</span>
  </span> 
  blah blah blah
</p>

（用span替代div更符合行内文本的语义，当然保留div也可以，只要设置inline-block属性即可）

CSS代码

/* 目标词容器：保证行内布局+定位参考 */
.word {
  position: relative;
  display: inline-block;
  /* 可选：给目标词加虚线下划线，提示可hover */
  text-decoration: underline dotted #666;
}

/* Tooltip默认隐藏状态 */
.definition {
  position: absolute;
  bottom: 100%; /* 固定在目标词上方 */
  left: 50%;
  transform: translateX(-50%); /* 基于自身宽度水平居中，适配动态内容 */
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease; /* 可选：添加平滑过渡动画 */
  
  /* 美化样式：内边距、背景、圆角等 */
  padding: 6px 12px;
  background-color: #2d2d2d;
  color: #fff;
  border-radius: 4px;
  white-space: nowrap; /* 可选：防止tooltip内容换行 */
  z-index: 100; /* 防止被页面其他元素覆盖 */
  margin-bottom: 8px; /* 可选：和目标词保持一点间距，避免紧贴 */
}

/* hover时显示tooltip */
.word:hover .definition {
  opacity: 1;
  visibility: visible;
}

为什么这个方案能解决你的问题？ #

• 之前用relative导致占用空间，是因为tooltip没有用absolute脱离文档流；
• 左对齐的问题，是因为直接用margin-left: -50%是基于父元素宽度的偏移，而transform: translateX(-50%)是基于tooltip自身宽度的偏移，完美适配动态内容；
• inline-block保证.word和普通文本一样在段落中正常流动，不会打断原有布局。

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