div中的CSS工具提示，其中`overflow：scroll`被切断并隐藏

qhhrdooz 于 5个月前发布在其他

关注(0)|答案(1)|浏览(45)

我正在用HTML和CSS开发我的第一个应用程序，在那里，我正在开发一个可滚动的项目列表。列表中的每个项目都有一个绝对相对于图像定位的工具提示，以便随着滚动改变其位置。然而，当overflow设置为scroll时，左侧工具提示被切断，右边的一个允许在X轴上滚动，滚动一直到底部，工具提示大小会干扰。
底部部分延伸以适合工具提示，左侧部分隐藏，右侧部分也隐藏，但可滚动：

的数据
HTML的当前结构是：

<div id="item-list">
  <div id="item-search">//Here comes a simple search bar</div>

  <div id="item-options">
    <div class="item-container">
      <img src="itemsImages/1001.png" class="item-images" />
      <span class="item-tooltip">
        <maintext>
          <stats> <attention>25</attention> Move Speed </stats> </maintext
        ><br />
      </span>
    </div>

    After that comes all the other items.
  </div>
</div>

字符集
CSS：

#item-options {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 80%;
  flex-wrap: wrap;
  overflow: scroll;
  font-size: 0;
}

#item-options div {
  width: 10%;
  aspect-ratio: 1/1;
  position: relative;
  overflow: visible;
}

.item-images {
  width: 100%;
  margin: 0;
}

.item-tooltip {
  position: absolute;
  visibility: visible;
  width: 200px;
  margin-left: -125px;
  margin-top: 50px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  word-break: normal;
  z-index: 1;
  opacity: 0;
  transition: opacity 500ms ease;
  font-size: 12px;
  user-select: none;
  pointer-events: none;
}

.item-container img:hover ~ .item-tooltip {
  visibility: visible;
  opacity: 1;
}

型
我试着只改变overflow-y选项，然而它仍然是一样的。我取出了div的relative位置，溢出问题消失了，但是滚动时，项目工具提示位置不对。

css

来源：https://stackoverflow.com/questions/77754249/css-tooltip-in-div-with-overflow-scroll-being-cut-off-and-hidden

1条答案

按热度按时间

des4xlb01#

您需要在滚动容器外部设置工具提示元素。您可以使用JavaScript触发工具提示的出现。您可能还希望使用JavaScript控制滚动容器滚动时工具提示的位置。

const image = document.querySelector('.item-images');
const tooltip = document.querySelector('.item-tooltip');

image.addEventListener('mouseenter', () => {
  tooltip.style.opacity = '1';
});
image.addEventListener('mouseleave', () => {
  tooltip.style.opacity = '0';
});

#item-options {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 80%;
  flex-wrap: wrap;
  overflow: scroll;
  font-size: 0;
}

#item-options div {
  width: 10%;
  aspect-ratio: 1/1;
  position: relative;
  overflow: visible;
}

.item-images {
  width: 100%;
  margin: 0;
}

.item-tooltip {
  position: absolute;
  visibility: visible;
  width: 200px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  word-break: normal;
  z-index: 100;
  opacity: 0;
  transition: opacity 500ms ease;
  font-size: 12px;
  user-select: none;
  pointer-events: none;
}

<div id="item-list">

  <div id="item-search">
    //Here comes a simple search bar
  </div>

  <div id="item-options">
    <div class="item-container">
      <img src="https://picsum.photos/500/500" class="item-images">
    </div>

    After that comes all the other items.
  </div>
</div>

<span class="item-tooltip">
  <maintext>
    <stats>
      <attention>25</attention> Move Speed
    </stats>
  </maintext><br>
</span>

赞(0）回复(0）举报 5个月前

我来回答

div中的CSS工具提示，其中`overflow：scroll`被切断并隐藏

1条答案

相关问题

热门标签

最新问答