ТЗ - создать HTML-страницу и разместить на ней несколько кнопок. При наведении на кнопку должна появляться подсказка сверху или, если нет места, снизу. <body> <div class="modal1"><button id="btn1">Кнопка 1</button> <div id="podsk1"><p>кнопка 1</p></div></div> </br> <div class="modal2"><div id="podsk2"><p>кнопка 2</p></div> <button id="btn2">Кнопка 2</button></div> <div class="modal3"><div id="podsk3"><p>кнопка 3</p></div> <button id="btn3" >Кнопка 3</button></div> </body> #podsk1, #podsk2, #podsk3{ position: fixed; position:abcolute; border:1px solid; width:70px; height:30px; border-radius:15px; background:#DEB887; } p{ margin:auto; } #podsk1{ margin-top:15px; } #podsk2, #podsk3{ margin-top:-55px; } .modal2{ margin-left:100px; display:inline-block; margin-top:50px; } .modal3{ margin-left:100px; display:inline-block; margin-left:250px; margin-top:50px; } .modal1{ position:relative; } .modal1, .modal2, .modal3{ width:100px; height:100px; position: fixed; } const btn1 = document.getElem
ТЗ - создать HTML-страницу и разместить на ней несколько кнопок. При наведении на кнопку должна появляться подсказка сверху или, если нет места, снизу.
HTML
<body>
<div class="modal1"><button id="btn1">Кнопка 1</button>
<div id="podsk1"><p>кнопка 1</p></div></div>
</br>
<div class="modal2"><div id="podsk2"><p>кнопка 2</p></div>
<button id="btn2">Кнопка 2</button></div>
<div class="modal3"><div id="podsk3"><p>кнопка 3</p></div>
<button id="btn3" >Кнопка 3</button></div>
</body>
CSS
#podsk1, #podsk2, #podsk3{
position: fixed;
position:abcolute;
border:1px solid;
width:70px;
height:30px;
border-radius:15px;
background:#DEB887;
}
p{
margin:auto;
}
#podsk1{
margin-top:15px;
}
#podsk2, #podsk3{
margin-top:-55px;
}
.modal2{
margin-left:100px;
display:inline-block;
margin-top:50px;
}
.modal3{
margin-left:100px;
display:inline-block;
margin-left:250px;
margin-top:50px;
}
.modal1{
position:relative;
}
.modal1, .modal2, .modal3{
width:100px;
height:100px;
position: fixed;
}
JS
const btn1 = document.getElementById("btn1");
const btn2 = document.getElementById("btn2");
const btn3 = document.getElementById("btn3");
btn1.addEventListener("mousemove", () =>{
podsk1.style.display="flex";
});
btn1.addEventListener("mouseout", () =>{
podsk1.style.display="none";
});
btn2.addEventListener("mousemove", () =>{
podsk2.style.display="flex";
});
btn2.addEventListener("mouseout", () =>{
podsk2.style.display="none";
});
btn3.addEventListener("mousemove", () =>{
podsk3.style.display="flex";
});
btn3.addEventListener("mouseout", () =>{
podsk3.style.display="none";
});
Ознакомиться с работай данного кода можно ТУТ.