如何在HTML中在其容器上顯示元素？

我想為元素制作一個自定義工具提示，但我將它包含在框中，它沒有足夠的空間放置工具提示，所以它只是裁剪（好吧，從技術上講，我可以滾動顯示它，因為overflow設定為auto，但我希望它在不這樣做的情況下可見）。有沒有辦法讓它越過邊緣？我試過用z-index沒有結果。

這就是我所說的：

.box {
  width: 100px;
  height: 100px;
  overflow: auto;
  border-style: solid;
  border-color: red;
}

.tooltip {
  padding-top: 20px;
  position: relative;
  display: inline-block;
}


.tooltip .tooltiptext {
  display: none;
  max-width: 60vw;
  min-width: 15vw;
  background-color: white;
  border-style: solid;
  border-color: #1a7bd9;
  position: absolute;
  z-index: 1000000;
}

.tooltip:hover .tooltiptext {
  display: block;
}

<div class='box'>
  <div class='tooltip'> Hover for tooltip
    <div class='tooltiptext'>
      Wow, this is amazing, such an epic tooltip text
    </div>
  </div>
</div>

編輯：重要的是懸停在元素上，而不是在它所在的框上。

uj5u.com熱心網友回復：

有很多方法可以解決這個問題，但如果您只是在尋找在容器外可見的工具提示，則不需要z-index或overflow. 您只需要移動您的工具提示，以便它出現在相對容器內的定位背景關系中。

我試圖組織 HTML 和類，使其更具語意性和簡潔性以進行說明。希望有幫助！

例子

.box {
position: relative;
  width: 100px;
  height: 100px;
}

.box-content {
  border-style: solid;
  border-color: red;
  padding-top: 20px;
  padding-bottom: 20px;
  display: inline-block;
}

.tooltip {
  opacity: 0;
  max-width: 60vw;
  min-width: 15vw;
  position: absolute;
  left: 0;
  top: 22px;
  background-color: white;
  border-color: #1a7bd9;
  border-style: solid;
}

.box:hover .tooltip {
  opacity: 1;
}

<div class='box'>
  <div class='box-content'>
    Hover for tooltip
  </div>
  <div class='tooltip'>
    Wow, this is amazing, such an epic tooltip text. I'm aligned with the top left of the text inside the box and covering it.
  </div>
</div>

更多關于定位背景關系的資訊。

uj5u.com熱心網友回復：

實作這一點的一種方法是制作一個::before位于被懸停的文本上方和旁邊的偽元素。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box {
  width: 100px;
  height: 100px;
  padding-top: 20px;
  border-style: solid;
  border-color: red;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip::before {
  content: "Wow, this is amazing, such an epic tooltip text";
  position: absolute;
  left: 25%;
  bottom: -75%;
  display: none;
  width: 500px;
  background-color: white;
  border: 2px solid pink;
}

.tooltip:hover::before {
  display: flex;
}

<div class='box'>
  <div class='tooltip'>
    Hover for tooltip
  </div>
</div>

uj5u.com熱心網友回復：

您可以將溢位更改為可見，它將彈出邊緣。

.box {
  overflow: visible;
 }

uj5u.com熱心網友回復：

創建一個容器來分隔工具提示和文本。并且不要將工具提示嵌套在它所參考的元素中。這樣做：

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  z-index: 200;
  width: 100px;
  height: 100px;
  overflow: auto;
  border-style: solid;
  border-color: red;
  box-sizing: border-box;
  margin-bottom: 5px;
}

.box-container .tooltiptext {
  font-family: Roboto, Arial;
  position: absolute;
  background-color: gray;
  color: white;
  padding-top: 4px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 2px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  white-space: nowrap;
  z-index: 400;
}

.box-container:hover .tooltiptext{
  opacity: 1;
}

<div class="box-container">
  <div class="box">
    <div class="tooltip">Hover for tooltip</div>
  </div>
  <div class="tooltiptext">Wow, this is amazing, such an epic</div>
</div>

PS：我重新設計了你的工具提示

標籤：htmlcss工具提示

上一篇：ASP.NETRazorPages等效于頁面加載方法

下一篇：蟒蛇硒；從值“資料標簽”獲取資料