时间戳

首页 > 解决方案 > 使用具有绝对定位的工具提示

html - 使用具有绝对定位的工具提示

问题描述

我想在我的段落文本中有工具提示。悬停时应出现一个带有帮助文本的框。

我找到了以下代码（我删除了悬停以保持简单）：

.para {
  margin-top: 200px;
}
.tooltip1 {
  color: blue;
  position: relative;
}

.tooltip-text1 {
  position: absolute;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  background-color: yellow;
  text-align: center;
  padding: 10px;
}
<p class="para">Todas estas questões, devidamente <span class="tooltip1">devidamente ponderadas <span class="tooltip-text1">Realizar o download dos testes para as avaliações formativas</span></span> levantam dúvidas sobre se a expansão dos mercados mundiais nos obriga à análise dos relacionamentos verticais entre as hierarquias</p>

这些行可以完成工作，但我不明白如何：

position: absolute;
bottom: 125%;
left: 50%;
margin-left: -60px;

为什么更改负边距会影响框的宽度？

标签： htmlcss

解决方案

负边距与框的宽度无关。负边距值是工具提示宽度的一半，因此它居中（因为left属性设置为50%）。您必须指定工具提示的宽度。也适用box-sizing: border-box;于它，因此在工具提示的整体宽度中考虑了边框和填充，并且它变得完全居中。我编辑了你的代码，看看它是如何工作的。

.para {
  margin-top: 200px;
}
.tooltip1 {
  display: inline-block;
  color: blue;
  position: relative;
}

.tooltip-text1 {
  width: 160px;
  position: absolute;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
  background-color: yellow;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;


----------


}
<p class="para">Todas estas questões, devidamente <span class="tooltip1">devidamente ponderadas <span class="tooltip-text1">Realizar o download dos testes para as avaliações formativas</span></span> levantam dúvidas sobre se a expansão dos mercados mundiais nos obriga à análise dos relacionamentos verticais entre as hierarquias</p>

推荐阅读