Bagaimana untuk mencapai kesan melata elemen dalam HTML?

Question

Saya ingin membuat petua alat tersuai untuk elemen ini, tetapi ia terkandung dalam kotak yang tidak mempunyai ruang yang cukup untuk memaparkan petua alat, jadi ia hanya dipangkas (saya sebenarnya boleh menatal untuk memaparkannya kerana limpahan ditetapkan kepada automatik, tetapi Saya mahu ia kelihatan tanpa menatal). Adakah terdapat cara untuk memaparkannya di luar batasan? Saya telah mencuba menggunakan z-index tetapi tidak berjaya. Inilah yang saya panggil: .box{width:100px;height:100px;overflow:auto;bor

P粉926174288 · Answer

Salah satu cara untuk melakukan ini ialah mencipta ::beforeelemen pseudo yang terletak di atas dan di sebelah teks yang dilegar.

* {
  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: "哇，这太棒了，这是一个史诗般的工具提示文本";
  position: absolute;
  left: 25%;
  bottom: -75%;
  display: none;
  width: 500px;
  background-color: white;
  border: 2px solid pink;
}

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


  
    鼠标悬停查看工具提示

P粉982881583 · Answer

Terdapat banyak cara untuk melakukan ini, tetapi jika anda hanya mahu petua alat kelihatan di luar bekas, anda tidak perlu menggunakan z-index或overflow. Anda hanya perlu mengalihkan petua alat ke dalam konteks kedudukan di dalam bekas relatif.

Mengikut ulasan anda, memandangkan anda mahu petua alat hanya muncul apabila menuding pada teks, saya akan mengesyorkan agar bekas relatif anda membungkus dengan tepat apa yang anda mahu tuding. Untuk menggambarkan ini, saya menambah sempadan pada bingkai luar, berbanding tempat anda memutuskan untuk menggunakan bekas relatif.

Kemudian baru letakkan box:hover更改为relative-container:hover ke elemen yang betul.

Saya cuba menyusun HTML dan nama kelas agar lebih semantik dan ringkas untuk ilustrasi. Harap ini membantu!

Contoh

.box {
  padding: 30px;
  border: blue solid;
  width: 300px;
  display: flex;
  align-items: center;
}

.relative-container {
  position: relative;
}

.box-content {
  border-style: solid;
  border-color: red;
  padding: 10px;
}

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

.relative-container:hover .tooltip {
  display: block;
  cursor: pointer;
}


  
    
      Hover for tooltip. I have a little padding to give the text some room.
    
    
    Wow, this is amazing, such an epic tooltip text. I'm aligned with the top of the box content containing text and take up the full width. I only appear when hovering over the box content (red outline), not the surrounding container (blue outline).