我花了两天时间试图解决这个问题,但我意识到我无法独自完成。我试图将我的工具提示相对于父级居中。这是我的代码=>
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;
}
预期的结果一定是这样的 =>
你能帮我吗?我尝试使用 float、text-align、justify-content、margin: 0 auto,我看到的所有内容都集中但没有任何效果
谢谢。
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号