时间戳

首页 > 解决方案 > 将工具提示保留在页面的可见部分

css - 将工具提示保留在页面的可见部分

问题描述

我有一个角度应用程序，我在其中实现了一个简单的工具提示，它可以不仅仅是文本，而是div可以包含任何内容：

.tooltip-master {
  position: relative;

  .tooltip-slave {
    visibility: collapse;
    position: absolute;
    top: 80%;
    left: 80%;
  }
}
.tooltip-master:hover {
  .tooltip-slave {
    visibility: visible;
  }
}

<div class="tooltip-master">
  <div>Element content</div>
  <div class="tooltip-slave">Tooltip content</div>
</div>

因此，每当有人将鼠标悬停在元素上时，工具提示就会显示在元素的右下角。这工作得很好。然而，对于页面底部的元素，工具提示现在大部分位于页面之外，因此不再可见。

我想要实现的是当它不再完全显示在页面上时向上移动工具提示。我更喜欢纯 CSS 的解决方案。有什么建议么？

标签： cssangular

解决方案

没有更多细节很难说...因为您使用的是 top: 80% 和 left: 80% 原因我猜..您可能会为仅使用 css 的解决方案而苦恼

所以我只使用 ngx bootstrap ... https://valor-software.com/ngx-bootstrap/#/tooltip它将自动将工具提示放置在默认设置上...

除非你有特定的理由想要按照你的方式去做……在那种情况下，看看他们是怎么做的

推荐阅读