如何使工具提示出现在<div>下面而不是覆盖它？

Question

这段代码在鼠标悬停在这个区域时显示一个包含五行信息的工具提示：<div class="event1Bubble tooltip">。目前，当工具提示出现时，它完全遮盖了<div>部分。我希望它能直接出现在该部分下方，这样我的用户就可以同时看到该部分和工具提示。请问有人能向我展示如何修改我的代码以实现此目的，而不改变任何现有的样式吗？最初的回答：

.Timeline {
  display: flex;
  align-items: center;
  height: 500px;
  margin-left: 80px;
}

.event1 {
  position: relative;
}

.event1Bubble {
  position: absolute;
  background-color: rgba(158, 158, 158, 0.1);
  width: 130px;
  height: 60px;
  top: -70px;
  left: -15px;
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(158, 158, 158, 0.64)
}

.event1Bubble:after,
.event1Bubble:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-bottom: 0;
}

.event1Bubble:before {
  bottom: -10px;
  left: 13px;
  border-top-color: rgba(222, 222, 222, 0.66);
  border-width: 12px;
}

.event1Bubble:after {
  bottom: -8px;
  left: 13px;
  border-top-color: #F6F6F6;
  border-width: 12px;
}

.eventTime {
  display: flex;
}

.DayDigit {
  font-size: 27px;
  font-family: "Arial Black", Gadget, sans-serif;
  margin-left: 10px;
  color: #4C4A4A;
}

.Day {
  font-size: 11px;
  margin-left: 5px;
  font-weight: bold;
  margin-top: 10px;
  font-family: Arial, Helvetica, sans-serif;
  color: #4C4A4A;
}

.MonthYear {
  font-weight: 600;
  line-height: 10px;
  color: #9E9E9E;
  font-size: 9px;
}

.active {
  font-family: "Arial Black", Gadget, sans-serif;
  color: #228B22;
  font-size: 11px;
  text-transform: uppercase;
  display: flex;
  flex: 1;
  align-items: center;
  margin-left: 12px;
  margin-top: -2px;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 480px;
  background-color: black;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  text-align: left;
  padding: 5px 0;
  padding-left: 5px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<div class="Timeline">
  <div class="event1">
    <div class="event1Bubble tooltip">
      <span class="tooltiptext">id: 12345</br>
                                    starts_on: 2019-03-07</br>
                                    start_reason: something</br>
                                    ends_on:</br>
                                    end_reason:</br>
                                    type: something
          </span>
      <div class="eventTime">
        <div class="DayDigit">10</div>
        <div class="Day">
          Wednesday
          <div class="MonthYear">September 2018</div>
        </div>
      </div>
      <div class="active">Active</div>
    </div>
  </div>
</div>

- C. Ball

---

尝试添加：top: -100%; 到工具提示中，这样它就会位于相对父元素的底部。 - undefined

它不起作用。它仍然覆盖了<div>，唯一的区别是现在工具提示的底部边缘与<div>的底部边缘对齐，而不是其顶部边缘与<div>的顶部边缘对齐。 - undefined

你试过了吗？你发现去掉减号之后可以工作吗？这是一个提示，答案应该在下面发布的哦 ;) - undefined

我没有意识到这是一个提示，也没有意识到去掉减号后它才能正常工作，直到我看到下面的答案。我已经好多年没写过CSS了。谢谢你的帮助。 - undefined

Answer 1

只需将悬停容器高度的值（在您的情况下为60像素）添加到绝对定位的工具提示元素的top属性中即可。另外，顺便说一下，</br>是无效的标记。在X(HT)ML中应该是独立的<br>或自闭合的<br/>。

.Timeline {
  display: flex;
  align-items: center;
  height: 500px;
  margin-left: 80px;
}

.event1 {
  position: relative;
}

.event1Bubble {
  position: absolute;
  background-color: rgba(158, 158, 158, 0.1);
  width: 130px;
  height: 60px;
  top: -70px;
  left: -15px;
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(158, 158, 158, 0.64)
}

.event1Bubble:after,
.event1Bubble:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-bottom: 0;
}

.event1Bubble:before {
  bottom: -10px;
  left: 13px;
  border-top-color: rgba(222, 222, 222, 0.66);
  border-width: 12px;
}

.event1Bubble:after {
  bottom: -8px;
  left: 13px;
  border-top-color: #F6F6F6;
  border-width: 12px;
}

.eventTime {
  display: flex;
}

.DayDigit {
  font-size: 27px;
  font-family: "Arial Black", Gadget, sans-serif;
  margin-left: 10px;
  color: #4C4A4A;
}

.Day {
  font-size: 11px;
  margin-left: 5px;
  font-weight: bold;
  margin-top: 10px;
  font-family: Arial, Helvetica, sans-serif;
  color: #4C4A4A;
}

.MonthYear {
  font-weight: 600;
  line-height: 10px;
  color: #9E9E9E;
  font-size: 9px;
}

.active {
  font-family: "Arial Black", Gadget, sans-serif;
  color: #228B22;
  font-size: 11px;
  text-transform: uppercase;
  display: flex;
  flex: 1;
  align-items: center;
  margin-left: 12px;
  margin-top: -2px;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 480px;
  background-color: black;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  text-align: left;
  padding: 5px 0;
  padding-left: 5px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top: 60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<div class="Timeline">
  <div class="event1">
    <div class="event1Bubble tooltip">
      <span class="tooltiptext">id: 12345<br>
                                    starts_on: 2019-03-07<br>
                                    start_reason: something<br>
                                    ends_on:<br>
                                    end_reason:<br>
                                    type: something
          </span>
      <div class="eventTime">
        <div class="DayDigit">10</div>
        <div class="Day">
          Wednesday
          <div class="MonthYear">September 2018</div>
        </div>
      </div>
      <div class="active">Active</div>
    </div>
  </div>
</div>

- Constantin Groß