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 (sebenarnya saya boleh menatal ke Ia dipaparkan kerana ;overflow ditetapkan kepada auto, tetapi saya mahu ia kelihatan tanpa menatal). Adakah terdapat cara untuk memaparkannya di luar batasan? Saya telah cuba menggunakan z-index tetapi itu tidak berjaya.

Inilah yang saya katakan:

.box {
  lebar: 100px;
  ketinggian: 100px;
  limpahan: auto;
  gaya sempadan: pepejal;
  warna sempadan: merah;
}

.petua alat{
  padding-top: 20px;
  kedudukan: relatif;
  paparan: inline-block;
}


.tooltip .tooltiptext {
  paparan: tiada;
  lebar maksimum: 60vw;
  lebar min: 15vw;
  warna latar belakang: putih;
  gaya sempadan: pepejal;
  warna sempadan: #1a7bd9;
  jawatan: mutlak;
  indeks z: 1000000;
}

.tooltip:hover .tooltiptext {
  paparan: blok;
}

<div class='box'>
  <div class='tooltip'> Paparkan petua alat pada tuding tetikus
    <div class='tooltiptext'>
      Wah, ini hebat, ini ialah teks petua alat epik
    </div>
  </div>
</div>

EDIT: Perkara penting ialah melayang berfungsi pada elemen, bukan kotak di dalamnya.

Answer 1

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

<div class='box'>
  <div class='tooltip'>
    鼠标悬停查看工具提示
  </div>
</div>

Answer 2

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

<div class='box'>
  <div class='relative-container'>
    <div class='box-content'>
      Hover for tooltip. I have a little padding to give the text some room.
    </div>
    <div class='tooltip'>
    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).
    </div>
  </div>
</div>