Как сделать чтобы такое же всплывающее окно которое выводится при наведение на кнопку 1 выводилось и при наведение на кнопку 2.При наведение на кнопку 1 пишется кнопка 1 а при наведение на кнопку 2 пишется кнопка 2.
function v45() {
bt11 = document.createElement('BUTTON'); // создание кнопки
bt11.id = 'cmd6'; // её id
bt11.textContent = 'Кнопка 2'; // её текст
document.body.appendChild(bt11); // нужно для добавления
var a = 6;
var b = 2;
bt11.title = 'количество очков ' + a + " " + b;
bt11.onclick = function() { // функция при клике на неё
}
}
v45();
#i-have-a-tooltip {
width:350px;
font-family:Helvetica,Arial,sans-serif;
font-weight:100;
font-size:20px;
text-align:center;
padding:50px;
margin:100px auto;
background:white;
position:relative;
border-radius:5px;
box-shadow:10px 10px 0px rgba(0,0,0,.05);
}
#i-have-a-tooltip:before {
content:attr(data-description);
box-sizing:border-box;
display:block;
background:rgba(0,0,0,.7);
color:white;
padding:20px;
position:absolute;
left:50%;
top:-30px;
margin-left:-100px;
width:200px;
height:65px;
line-height:25px;
border-radius:5px;
opacity:0;
transition:.25s ease-in-out;
}
#i-have-a-tooltip:after {
content:'';
display:block;
position:absolute;
top:35px;
left:50%;
margin-left:-8px;
height:0;
width:0;
border-left:8px solid transparent;
border-right:8px solid transparent;
border-top:8px solid rgba(0,0,0,.7);
transition:.25s ease-in-out;
opacity:0;
}
#i-have-a-tooltip:hover:before {
opacity:1;
top:-50px;
}
#i-have-a-tooltip:hover:after {
opacity:1;
top:15px;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="i-have-a-tooltip" data-description="Кнопка 1">
Кнопка . <br> 1.
</div>
</body>
</html>