Question

当鼠标悬停在此部分上时，此代码显示一个包含五行信息的工具提示：class Matrix4(): def __init__(self, row1=None, row2=None, row3=None, row4=None): """Constructor for Matrix4 DO NOT MODIFY THIS METHOD""" if row1 is None: row1 = Vec4() if row2 is None: row2 = Vec4() if row3 is None: row3 = Vec4() if row4 is None: row4 = Vec4() self.m_values = [row1,row2,row3,row4] def __str__(self): """Returns a string representation of the matrix DO NOT MODIFY THIS METHOD""" toReturn = '' if self is None: return '0.00 0.00 0.00 0.00\n0.00 0.00 0.00 0.00\n0.00 0.00 0.00 0.00\n0.00 0.00 0.00 0.00' for r in range(0,4): for c in range(0,4): toReturn += "%.2f" % self.m_values[r].values[c] if c != 3: toReturn += ' ' toReturn += '\n' return toReturn def setIdentity(self): """Sets the current Matrix to an identity matrix self is an identity matrix after calling this method""" m = Matrix4() row1 = Vec4(1,0,0,0) row2 = Vec4(0,1,0,0) row3 = Vec4(0,0,1,0) row4 = Vec4(0,0,0,1) self.m_values = [row1, row2, row3, row4] m.setIdentity() return Matrix4(row1, row2, row3, row4)

当前，工具提示在显示<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;
}

Answer 1

只需在绝对定位的工具提示元素上添加一个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>

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

1 个答案: