Question

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

我上网查找了代码，但不确定如何运行。这是代码。（为了保持简单，我删除了代码的悬停部分）

.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;

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

Answer 1

这里的关键是要了解CSS的位置（绝对和相对）。当您为元素提供绝对位置时，它会在DOM中搜索第一个非静态父级（对于本例是relative（tooltip1）），然后它将自身附加到该父级，就好像该parent（tooltip1）是整个屏幕一样。左边距：-60px只是调整了太尖文本的位置，但是绝对相对位置组合将使它保持其父级不变。

更深入的了解：https://dzone.com/articles/css-position-relative-vs-position-absolute

有人可以向我解释使用绝对定位的工具提示如何工作

1 个答案: