97成人精品区在线播放,国产精品久久欧美久久一区,亚洲精品国产成人av

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Tooltip am relativen übergeordneten Element ausrichten

P粉251903163 2024-04-06 13:16:59

867

Ich habe zwei Tage damit verbracht, das herauszufinden, aber mir wurde klar, dass ich es alleine nicht schaffen würde. Ich versuche, meinen Tooltip relativ zum übergeordneten Element zu zentrieren. Das ist mein Code =>

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>

Das erwartete Ergebnis muss so aussehen =>

Kannst du mir helfen? Ich habe es mit float、text-align、justify-content、margin: 0 auto versucht und alles, was ich sah, war fokussiert, aber nichts hat funktioniert

Vielen Dank.

P粉251903163

Antworte allen(2)

P粉9167604292024-04-07 10:44:26 2 Etage

看來(lái)我找到了解決方案。我補(bǔ)充道：

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

將所有內(nèi)容居中，然后是：

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

垂直偏移。

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

Wie +0

Antwort hinzufügen

P粉5783439942024-04-07 09:26:26 1 Etage

將需要作為中心參考的元素設(shè)置為相對(duì)元素。在您的情況下，您希望與 .btnClass 保持一致。這樣，類就可以包裝其內(nèi)容。

.btnClass {
  position: relative;
}

之后您就可以將工具提示居中。將左側(cè)位置定義為 50%，并使用 transform 和 translateX(-50%)，這樣，transform 屬性就移動(dòng)了元素本身的 -50%，這已經(jīng)是向左移動(dòng)了 50%，所以結(jié)果是完美的對(duì)齊。

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

最終結(jié)果：

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

Wie +0

Antwort hinzufügen