Jajarkan petua alat kepada induk relatif

Question

Saya menghabiskan dua hari cuba memikirkan perkara ini tetapi saya sedar saya tidak boleh melakukannya sendirian. Saya cuba memusatkan petua alat saya berbanding dengan ibu bapa. Ini kod saya =>

let collection = document.querySelectorAll("[data-text]");
collection.forEach((ele, ind) => {
    var element = document.createElement("p");
    element.className = "tooltip-text";
    element.innerText = ele.dataset.text;
    element.dataset.name = "_" + ele.id + ind;
    document.getElementById(ele.id).appendChild(element);
         
    document.querySelector('#' + ele.id).addEventListener('mouseover', () => {
        document.querySelector('[data-name="' + element.dataset.name + '"]').style.visibility = 'visible';
     }, false);

   document.querySelector('#' + ele.id).addEventListener('mouseleave', () => {
        document.querySelector('[data-name="' + element.dataset.name + '"]').style.visibility = 'hidden';
   }, false);

});

.container {
  display: flex;
  background: #ccc;
  justify-content: center;
  align-items: center;
  height: 95vh;
}

.c-content{
  width: 100%;
  max-width: 800px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.toprightcontrols {
  margin: 0 1.2% 0 0;
  display: flex;
  position: absolute; 
  justify-content: flex-end;
  top: 0;
  right: 0;
  width: 150px;
  padding-top: 0;
  flex-wrap: nowrap;
}

.btnClass {
  padding: 10px;
  background: none;
  border: 0;
  outline: 0;
  cursor: pointer;
  align-self: center;
  justify-self: right;
}

.btnClass:before {
  content: url('https://img001.prntscr.com/file/img001/nLMdieVITRSq82yZdqlWOw.png');
}

p.tooltip-text {
  color: black;
  display: block;
  visibility: hidden;
  width: fit-content;
  position: absolute;
  border-radius: 2px;
  z-index: 1;
  background: white;
  pointer-events: none;
  padding: 6px 8px 20.2px 8px;
  font-size: 1rem;
  animation: fadein 0.2s ease-in;
  animation-fill-mode: forwards;
}

p.tooltip-text:before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  border: 8px solid transparent;
  border-bottom: 8px solid white;
}

<div class="container">
            <div id="c-content">
                <div class="toprightcontrols">
                    <span name="btn1" id="btn1" class="btnClass" data-text="Hello there"></span>
                    <span name="xxxxx" id="xxxxx" class="btnClass" data-text="Tooltip"></span>
                    <span name="something" id="something" class="btnClass" data-text="Click me"></span>
                    <span name="randomid" id="randomid" class="btnClass" data-text="I'm a text"></span>
               </div>
        </div>
</div>

Hasil yang diharapkan mestilah seperti ini =>

Bolehkah anda membantu saya? Saya cuba menggunakan float、text-align、justify-content、margin: 0 auto dan semua yang saya lihat tertumpu tetapi tiada apa yang berkesan

Terima kasih.

Answer 1

Nampaknya saya telah menemui penyelesaiannya. Saya menambah:

.btnClass {
  display: flex;
  justify-content: center;
  align-items: center;
}

Pusat semuanya kemudian:

p.tooltip-text {
  top:30px;
}

Imbang menegak.

let collection = document.querySelectorAll("[data-text]");
  collection.forEach((ele, ind) => {
  var element = document.createElement("p");
  element.className = "tooltip-text";
  element.innerText = ele.dataset.text;
  element.dataset.name = "_" + ele.id + ind;
                  document.getElementById(ele.id).appendChild(element);
         
 document.querySelector('#' + ele.id).addEventListener('mouseover', () => {
                document.querySelector('[data-name="' + element.dataset.name + '"]').style.visibility = 'visible';
            }, false);

            document.querySelector('#' + ele.id).addEventListener('mouseleave', () => {
                document.querySelector('[data-name="' + element.dataset.name + '"]').style.visibility = 'hidden';
            }, false);

});

.container {
  display: flex;
  background: #ccc;
  justify-content: center;
  align-items: center;
  height: 95vh;
}

.c-content{
  width: 100%;
  max-width: 800px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.toprightcontrols {
  margin: 0 1.2% 0 0;
  display: flex;
  position: absolute; 
  justify-content: flex-end;
  top: 0;
  right: 0;
  width: 150px;
  padding-top: 0;
  flex-wrap: nowrap;
}

.btnClass {
  padding: 10px;
  background: none;
  border: 0;
  outline: 0;
  cursor: pointer;
  align-self: center;
  justify-self: right;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btnClass:before {
  content: url('https://img001.prntscr.com/file/img001/nLMdieVITRSq82yZdqlWOw.png');
}

p.tooltip-text {
  color: black;
  display: block;
  visibility: hidden;
  width: fit-content;
  position: absolute;
  top:30px;
  border-radius: 2px;
  z-index: 1;
  background: white;
  pointer-events: none;
  padding: 6px 8px 20.2px 8px;
  font-size: 1rem;
  animation: fadein 0.2s ease-in;
  animation-fill-mode: forwards;
}

p.tooltip-text:before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  border: 8px solid transparent;
  border-bottom: 8px solid white;
}

Answer 2

Tetapkan elemen yang perlu menjadi rujukan pusat sebagai elemen relatif. Dalam kes anda, anda mahu konsisten dengan .btnClass . Dengan cara ini, kelas boleh membungkus kandungannya.

.btnClass {
  position: relative;
}

Anda kemudian boleh memusatkan petua alat. Tentukan kedudukan kiri sebagai 50%，并使用 transform 和 translateX(-50%) supaya sifat transformasi bergerak -50% daripada elemen itu sendiri, yang sudah 50% ke kiri, jadi hasilnya adalah penjajaran yang sempurna.

.tooltip-text {
  left: 50%;
  transform: translateX(-50%);
}

Keputusan akhir:

let collection = document.querySelectorAll("[data-text]");
collection.forEach((ele, ind) => {
var element = document.createElement("p");
element.className = "tooltip-text";
element.innerText = ele.dataset.text;
element.dataset.name = "_" + ele.id + ind;
document.getElementById(ele.id).appendChild(element);
         
    document.querySelector('#' + ele.id).addEventListener('mouseover', () => {
        document.querySelector('[data-name="' + element.dataset.name + '"]').style.visibility = 'visible';
     }, false);

   document.querySelector('#' + ele.id).addEventListener('mouseleave', () => {
        document.querySelector('[data-name="' + element.dataset.name + '"]').style.visibility = 'hidden';
   }, false);

});

.btnClass {
  position: relative;
}

.tooltip-text {
  left: 50%;
  transform: translateX(-50%);
}

.container {
  display: flex;
  background: #ccc;
  justify-content: center;
  align-items: center;
  height: 95vh;
}

.c-content{
  width: 100%;
  max-width: 800px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.toprightcontrols {
  margin: 0 1.2% 0 0;
  display: flex;
  position: absolute; 
  justify-content: flex-end;
  top: 0;
  right: 0;
  width: 150px;
  padding-top: 0;
  flex-wrap: nowrap;
}

.btnClass {
  padding: 10px;
  background: none;
  border: 0;
  outline: 0;
  cursor: pointer;
  align-self: center;
  justify-self: right;
}

.btnClass:before {
  content: url('https://img001.prntscr.com/file/img001/nLMdieVITRSq82yZdqlWOw.png');
}

p.tooltip-text {
  color: black;
  display: block;
  visibility: hidden;
  width: fit-content;
  position: absolute;
  border-radius: 2px;
  z-index: 1;
  background: white;
  pointer-events: none;
  padding: 6px 8px 20.2px 8px;
  font-size: 1rem;
  animation: fadein 0.2s ease-in;
  animation-fill-mode: forwards;
}

p.tooltip-text:before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  border: 8px solid transparent;
  border-bottom: 8px solid white;
}