时间戳

首页 > 解决方案 > 如何将工具提示集成到我的

区域？

html - 如何将工具提示集成到我的
区域？

问题描述

我想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>

标签： htmlcss

解决方案

为工具提示创建一个类。然后添加到 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>

推荐阅读