Question

当用户将鼠标悬停在热点上时，我正在尝试在我的网站上创建一些互动点，我希望弹出窗口是全角的。相对于容器.hotspot-wrp。当前，弹出窗口在可见区域之外，并且在移动设备上，该内容不可见。

.hotspot-wrp {
  display: block;
  position: relative;
  background: #636e72;
  width: 80vw;
  margin: 0px auto;
  height: 200px;
}

.hot-spot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(227, 193, 122, 0.8);
  position: absolute;
  cursor: pointer;
  transition: all ease 350ms;
  margin-left: -12px;
  margin-top: -12px;
}

.tooltip {
  position: absolute;
  background: #fff;
  border: 1px solid #E8C378;
  width: 100%;
  padding: 15px;
  display: none;
  margin-top: 30px;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  z-index: 9999;
}

.hot-spot:hover .tooltip,
.hot-spot:active .tooltip {
  display: block;
}

<div class="hotspot-wrp">
  <div class="hot-spot" style="top:43.8776%; left:4.4476%;">
    <div class="tooltip">
      <h3>Test</h3>
      <p>Some demo text will be in here.</p>
    </div>
  </div>
  <div class="hot-spot" style="top:4.0816%; left:63.4146%;">
    <div class="tooltip">
      <h3>Test</h3>
      <p>Some demo text will be in here.</p>
    </div>
  </div>
</div>

JSFiddle-http://jsfiddle.net/L7ksfdmc/

Answer 1

将overflow: hidden;添加到父容器。

.hotspot-wrp {
  display: block;
  position: relative;
  background: #636e72;
  width: 80vw;
  margin: 0px auto;
  height: 200px;
  overflow: hidden;
}

.hot-spot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(227, 193, 122, 0.8);
  position: absolute;
  cursor: pointer;
  transition: all ease 350ms;
  margin-left: -12px;
  margin-top: -12px;
}

.tooltip {
  position: absolute;
  background: #fff;
  border: 1px solid #E8C378;
  width: 100%;
  padding: 15px;
  display: none;
  margin-top: 30px;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  z-index: 9999;
}

.hot-spot:hover .tooltip,
.hot-spot:active .tooltip {
  display: block;
}

<div class="hotspot-wrp">
  <div class="hot-spot" style="top:43.8776%; left:4.4476%;">
    <div class="tooltip">
      <h3>Test</h3>
      <p>Some demo text will be in here.</p>
    </div>
  </div>
  <div class="hot-spot" style="top:4.0816%; left:63.4146%;">
    <div class="tooltip">
      <h3>Test</h3>
      <p>Some demo text will be in here.</p>
    </div>
  </div>
</div>

Answer 2

就像Emil所说的那样，使用overflow:hidden并使工具提示变为全角，选择所需的长度（以像素为单位）以增加宽度。如果在.tootltip css中使用width:100%，它将仅获取其父div宽度的宽度。因此，请根据要求使用绝对长度或工具提示中的文本长度。

停止绝对div溢出父项

2 个答案: