Question

我想在此处显示的代码中向整个event1Bubble <div>区域添加工具提示。关于如何向<div>容器中添加工具提示的所有其他说明都包括向其添加新的tooltip类，但是我的<div>在此代码中已经有一个类，因此我希望有人可以告诉我如何修改现有代码以创建工具提示，同时保留所有现有样式信息。

.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,
.event2Bubble:after,
.event2Bubble: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;
}

<div class="Timeline">
  <div class="event1">
    <div class="event1Bubble">
      <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>

Answer 1

为工具提示创建一个类。然后添加到div

例如：

.tooltip{

}

<div class="Timeline">
  <div class="event1">
    <div class="event1Bubble tooltip"> // like this
      <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 个答案: