我花了两天时间试图解决这个问题，但我意识到我无法独自完成。我试图将我的工具提示相对于父级居中。这是我的代码=>
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>
预期的结果一定是这样的 =>
你能帮我吗？我尝试使用 float、text-align、justify-content、margin: 0 auto，我看到的所有内容都集中但没有任何效果
谢谢。
看来我找到了解决方案。我补充道：
.btnClass { display: flex; justify-content: center; align-items: center; }将所有内容居中，然后是：
p.tooltip-text { top:30px; }垂直偏移。
将需要作为中心参考的元素设置为相对元素。在您的情况下，您希望与
.btnClass保持一致。这样，类就可以包装其内容。.btnClass { position: relative; }之后您就可以将工具提示居中。将左侧位置定义为
50%，并使用transform和translateX(-50%)，这样，transform 属性就移动了元素本身的 -50%，这已经是向左移动了 50%，所以结果是完美的对齐。.tooltip-text { left: 50%; transform: translateX(-50%); }最终结果：
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; }