Question

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

＆＃13;

        .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;
        }

＆＃13;

<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>

＆＃13;

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>

HTML：无法获得工具提示溢出：可以使用position：relative div

1 个答案: