时间戳

首页 > 解决方案 > 使用 CSS 显示与父元素相关的工具提示

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

问题描述

我需要帮助以相对于父元素显示工具提示。参考屏幕 1 它显示描述是完美的屏幕 1。但是当我滚动部分描述时，屏幕 2屏幕 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>

标签： csstooltipjquery-ui-tooltip

解决方案

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

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

问题是您设置了 element 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>

推荐阅读