HTML:无法获得工具提示溢出:使用 position:relative div 时可见

Question

我有一个 div 需要有相对定位和有限的宽度和高度。如果内容溢出，我想添加滚动条。为此，我有样式溢出:自动。这么多工作。现在我有一个工具提示，我想在将鼠标悬停在目标上时显示它。我希望工具提示完整显示，因此如有必要，它应该显示在封闭 div 的边界之外。为此，我有工具提示样式溢出:可见。问题是，工具提示不会显示在 div 的边界之外。如果我删除 div 的定位，它会按预期工作:div 有滚动条，工具提示超出 div。当 div 相对定位时，我怎样才能让它工作？如有任何帮助，我们将不胜感激。

        .tooltip {
            position: relative;
            display: inline-block;
            width: 18px;
            height: 18px;
            background-color: steelblue;
            color: yellow;
            border: solid;
            border-width: 1px;
            border-radius: 50%;
            text-align: center;
            vertical-align: central;
            cursor: help;
        }

            .tooltip:before {
                content: '?';
            }

            .tooltip + .tooltiptext {
                position: absolute;
                display: none;
                margin: 5px;
                padding: 5px;
                min-width: 200px;
                max-width: 400px;
                background-color: steelblue;
                color: #fff;
                text-align: left;
                border-radius: 6px;
                overflow: visible;
            }

            .tooltip:hover + .tooltiptext {
                display: inline;
            }


        .scrollIfNeeded {
            position: relative;
            left: 100px;
            top: 100px;
            overflow: auto;
            background-color: lightgoldenrodyellow;
        }    

<div id="ModePage" class="scrollIfNeeded" style="width:300px; max-height:100px; margin-right:5px;">
        <span class="tooltip"></span>
        <span class="tooltiptext">
            This is my tooltip. I want it to display beyond the bounds of the ModePage div. I have the tooltip style set to overflow:visible, however it is behaving as if it inherits the setting of the ModePage div. 
        </span>
        Scale: <input id="ScaleUpButton" type="text" /> This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. 
    </div>

Answer 1

您需要添加 position:fixed; 来解决这个问题。试试这个

.tooltip {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: steelblue;
  color: yellow;
  border: solid;
  border-width: 1px;
  border-radius: 50%;
  text-align: center;
  vertical-align: central;
  cursor: help;
}
.tooltip:before {
  content: '?';
}
.tooltip + .tooltiptext {
  position: absolute;
  display: none;
  margin: 5px;
  padding: 5px;
  min-width: 200px;
  max-width: 400px;
  background-color: steelblue;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  overflow: visible;
}
.tooltip:hover + .tooltiptext {
  display: inline;

/* here need to set position and width [optionally]*/
  position: fixed;
  max-width: 200px;
}
.scrollIfNeeded {
  position: relative;
  left: 100px;
  top: 100px;
  overflow: auto;
  background-color: lightgoldenrodyellow;
}

<div id="ModePage" class="scrollIfNeeded" style="width:300px; max-height:100px; margin-right:5px;">
  <span class="tooltip"></span>
  <span class="tooltiptext">
            This is my tooltip. I want it to display beyond the bounds of the ModePage div. I have the tooltip style set to overflow:visible, however it is behaving as if it inherits the setting of the ModePage div. 
        </span>
  Scale:
  <input id="ScaleUpButton" type="text" />This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear.
  This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear.
</div>