0

Как сделать чтобы точно такое же сообщение при наведение как на кнопку 1 выводилось и при наведение на кнопку 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();
#cmd6 {
  position: absolute;
  top: 200px;
  /*верх низ */
  left: 200px;
  /*лево право */
  text-decoration: none;
  text-align: center;
  padding: 15px 20px;
  border: solid 2px #00ccff;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  font: 16px "Lucida Console", Monaco, monospace;
  font-weight: bold;
  color: #00ffea;
  background: #000000;
  -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
  -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
  box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}

[data-tooltip] {
  position: relative;
  /* Относительное позиционирование */
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  /* Выводим текст */
  position: absolute;
  /* Абсолютное позиционирование */
  width: 300px;
  /* Ширина подсказки */
  left: 0;
  top: 0;
  /* Положение подсказки */
  background: #3989c9;
  /* Синий цвет фона */
  color: #fff;
  /* Цвет текста */
  padding: 0.5em;
  /* Поля вокруг текста */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  /* Параметры тени */
  pointer-events: none;
  /* Подсказка */
  opacity: 0;
  /* Подсказка невидима */
  transition: 1s;
  /* Время появления подсказки */
}

[data-tooltip]:hover::after {
  opacity: 1;
  /* Показываем подсказку */
  top: 2em;
  /* Положение подсказки */
}
<p data-tooltip="Всплывающая подсказка сообщает о чём-то многозначном и полезном...">Кнопка 1.</p>

1 ответ 1

1

В вашем случае так =)

bt11.setAttribute("data-tooltip","Всплывающая подсказка сообщает о чём-то многозначном и полезном...");
1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.