使用 CSS 显示与父元素相关的工具提示

Question

我需要帮助以相对于父元素显示工具提示。请参阅屏幕 1，它显示描述是完美的screen 1。但是屏幕 2 Screen 2 当我滚动部分描述时显示相同的位置，但我需要相对的

<div class="item" data-key="15" data-value="244937">
    <input class="option" id="treemultiselect-0-15" type="checkbox">
    <span class="description">
        <label class="" for="treemultiselect-0-15">Ashram</label>
    </span>
    <div class="temp-description-popup" style="position: absolute;">
        No. &amp; Listing of <b>Ashrams</b><br>
    </div>
</div>

Answer 1

我想你正在寻找这样的东西，对吧？

最好创建一个 sn-p 并重新创建您的问题，这样每个人都可以抓住这个想法并帮助您。

问题是你设置了元素position: absolute，所以它只是根据它的relative父元素保持位置。滚动不会移动它。

这个例子将帮助你更好地理解位置的工作原理https://codepen.io/AlHakem/pen/YayxBo

.scroller {
  max-height: 150px;
  overflow-y: scroll;
  height: 150px;
  float: left;
  width: 200px;
}

.item {
  position: relative;
}

.temp-description-popup {
  visibility: hidden;
  height: 0px;
}

.item:hover>.temp-description-popup {
  visibility: visible;
  height: auto;
  padding: 4px;
  background-color: #f1f1f1;
  border-radius: 4px;
  position: absolute;
  top: 25px;
  z-indeX: 2;
}

<div class="scroller">
  <div class="item" data-key="15" data-value="244937">
    <input class="option" id="treemultiselect-0-15" type="checkbox">
    <span class="description">
        <label class="" for="treemultiselect-0-15">Ashram</label>
    </span>
    <div class="temp-description-popup">
      No. &amp; Listing of <b>Ashrams</b><br>
    </div>
  </div>
  <div class="item" data-key="15" data-value="244937">
    <input class="option" id="treemultiselect-0-15" type="checkbox">
    <span class="description">
        <label class="" for="treemultiselect-0-15">Ashram</label>
    </span>
    <div class="temp-description-popup">
      No. &amp; Listing of <b>Ashrams</b><br>
    </div>
  </div>
  <div class="item" data-key="15" data-value="244937">
    <input class="option" id="treemultiselect-0-15" type="checkbox">
    <span class="description">
        <label class="" for="treemultiselect-0-15">Ashram</label>
    </span>
    <div class="temp-description-popup">
      No. &amp; Listing of <b>Ashrams</b><br>
    </div>
  </div>
  <div class="item" data-key="15" data-value="244937">
    <input class="option" id="treemultiselect-0-15" type="checkbox">
    <span class="description">
        <label class="" for="treemultiselect-0-15">Ashram</label>
    </span>
    <div class="temp-description-popup">
      No. &amp; Listing of <b>Ashrams</b><br>
    </div>
  </div>
  <div class="item" data-key="15" data-value="244937">
    <input class="option" id="treemultiselect-0-15" type="checkbox">
    <span class="description">
        <label class="" for="treemultiselect-0-15">Ashram</label>
    </span>
    <div class="temp-description-popup">
      No. &amp; Listing of <b>Ashrams</b><br>
    </div>
  </div>
  <div class="item" data-key="15" data-value="244937">
    <input class="option" id="treemultiselect-0-15" type="checkbox">
    <span class="description">
        <label class="" for="treemultiselect-0-15">Ashram</label>
    </span>
    <div class="temp-description-popup">
      No. &amp; Listing of <b>Ashrams</b><br>
    </div>
  </div>

</div>