时间戳

首页 > 解决方案 > 如何使工具提示出现在下方

而不是覆盖它？

html - 如何使工具提示出现在下方
而不是覆盖它？

问题描述

当鼠标悬停在此部分上时，此代码显示包含五行信息的工具提示：<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>

标签： htmlcss

解决方案

只需将top悬停容器的高度值（在您的情况下为 60px）添加到绝对定位的工具提示元素。

顺便说一句，</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>

推荐阅读