Question

对于下面代码段中的“foo，bar，baz，qux”，悬停的文本直接位于元素下方并且正确。但是，在我向下滚动然后将鼠标悬停在元素上之后，文本不再位于文本下方并进入主容器之外。我怎样才能对此进行修改，以便悬停的文本保留在主容器内，也可以直接放在文本中，就像它在“foo，bar，baz，qux”中一样？

#main-container {
   max-height: 80px;
   overflow-y: scroll; 
   display: inline-block;
}
.hastooltip {
  cursor: pointer;
}

.hastooltip:hover .tooltip {
  display: block;
  color: black;
}


.tooltip {
  position: absolute;
  white-space: nowrap;
  display: none;
  background: #afeafe;
  border: 1px solid black;
  padding: 1px;
  z-index: 1000;
}

<div id="main-container">
    <div id="text-container">
        <span class="hastooltip">
          <div id="first">foo</div>
          <span class="tooltip">a</span>
        </span>
        <span class="hastooltip">
          <div id="second">bar</div>
          <span class="tooltip">b</span>
        </span>
        <span class="hastooltip">
          <div id="third">baz</div>
          <span class="tooltip">c</span>
        </span>
        <span class="hastooltip">
          <div id="fourth">qux</div>
          <span class="tooltip">d</span>
        </span>
        <span class="hastooltip">
          <div id="fifth">quux</div>
          <span class="tooltip">e</span>
        </span>
        <span class="hastooltip">
          <div id="sixth">corge</div>
          <span class="tooltip">f</span>
        </span>            
    </div>
</div>

Answer 1

您需要将echo json_enocde($apiArray)分配给其父元素。

请参阅以下代码段：

＆＃13;

htmlentities($values_that_need_to_be_printed_with_script_tag)

＆＃13;

CSS(corss site scripting)

＆＃13;

Answer 2

.hastooltip {
  cursor: pointer;
position:relative;
}

Answer 3

将位置设置为relative到其父.hastooltip。所以绝对位置停在position: relative;。

滚动时悬停文本不会相对于元素移动

3 个答案: