使元素可滚动会切断内容

Question

我正在开发一个经常使用工具提示的网络应用程序。该应用程序使用 Bulma CSS library along with the Bulma Tooltip Extension 设置样式。我的应用程序中的一些元素有内部滚动（它们的 overflow-y 属性设置为 'scroll' 或 'auto'）。将 overflow-y 设置为 'scroll'/'auto' 会自动将 overflow-x 设置为 'hidden （根据其他答案，这是不可避免的）。

这导致悬垂的工具提示被截断，如在此沙箱中所见：

虽然我知道不可能有可见的 x 溢出和可滚动的 y 溢出，但我想有一些工作 around/solution 至少允许显示悬垂工具提示的外观在可滚动的元素中。在我的例子中，允许 x 轴上的可见悬垂更为重要（没有其他 question/answers address/resolve 这个确切的问题）。

任何帮助将不胜感激。

#testDiv {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 75px;
  overflow-y: auto; /* Delete Line to see full tooltip */
}

.button {
  margin: 10px;
}

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
    <link rel="stylesheet" href="https://wikiki.github.io/css/documentation.css?v=201904261505">
  </head>
  <body>
    <div id="testDiv">
      <button class="button tooltip" data-tooltip="This is a Tooltip">X</button>
    </div>
  </body>
</html>

.

Answer 1

试试这个：

.tooltip {
    position: absolute;
}

Answer 2

您可以创建另一个具有默认溢出设置的 div 元素 (.wrapper)。它将成为您的 #testDiv 和 .button.

的容器

现在，将 position: relative 添加到 .wrapper。 .button 现在可以绝对定位，看起来就像在 #testDiv 元素内，但从技术上讲 - 它不是 :)

#testDiv 元素需要扩展到 100% 宽度和高度，以继承 .wrapper

的大小

最后一步 - 添加一些 padding-top 到 #testDiv 以防止 .button 元素上的内容重叠。

看下面的代码：

.wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 75px;
}

#testDiv {
  height: 100%;
  width: 100%;
  padding-top: 50px;
  border: 1px solid black;
  overflow-y: auto; /* Delete Line to see full tooltip */
}

.button.tooltip {
  margin: 10px;
  position: absolute;
  top: 0;
  right: 0;
}

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
    <link rel="stylesheet" href="https://wikiki.github.io/css/documentation.css?v=201904261505">
  </head>
  <body>
    <div class="wrapper">
      <button class="button tooltip" data-tooltip="This is a Tooltip">X</button>
      <div id="testDiv">
        content
      </div>
    </div>
  </body>
</html>

我希望这个解决方案足够了:)

使元素可滚动会切断内容

Making element scroll-able is cutting off content

html

css

user-interface

scroll

bulma