J'ai passé deux jours à essayer de comprendre cela mais j'ai réalisé que je ne pouvais pas le faire seul. J'essaie de centrer mon info-bulle par rapport au parent. C'est mon 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>
Le résultat attendu doit être comme ça =>
Pouvez-vous m'aider ? J'ai essayé d'utiliser float、text-align、justify-content、margin: 0 auto et tout ce que j'ai vu était concentré mais rien n'a fonctionné
Merci.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
On dirait que j'ai trouvé la solution. J'ai ajouté :
.btnClass { display: flex; justify-content: center; align-items: center; }Centrez tout ensuite :
p.tooltip-text { top:30px; }Décalage vertical.
Définissez l'élément qui doit être la référence centrale en tant qu'élément relatif. Dans votre cas, vous voulez être cohérent avec
.btnClass. De cette façon, la classe peut envelopper son contenu..btnClass { position: relative; }Vous pouvez ensuite centrer l'info-bulle. Définissez la position de gauche comme
50%，并使用transform和translateX(-50%)afin que la propriété de transformation déplace -50 % de l'élément lui-même, qui est déjà de 50 % vers la gauche, le résultat est donc un alignement parfait..tooltip-text { left: 50%; transform: translateX(-50%); }Résultat final :
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; }