Question

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

这将导致悬垂的工具提示被切断，如以下沙箱所示：

虽然我知道不可能有可见的x溢出和可滚动的y溢出，但我认为有一些解决方法/解决方案至少可以允许在滚动中显示悬垂的工具提示-能干的元素。就我而言，在x轴上允许可见的悬垂更为重要（没有其他问题/答案可以解决/解决这个确切的问题）。

任何帮助将不胜感激。

#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的大小

最后一步-在#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>

我希望此解决方案足够:)

使元素可滚动可切断内容

2 个答案: