Данная строка не корректно написана - первая часть event.target.contains('.box') проверяет находится ли в event.target какой-либо элемент (а не название класса) и ответ будет булево значение (true/false).
Есть еще проверка наличия определенного класса, тогда должно так выглядеть
event.target.classList.contains('box') - тут название класса без точки, и опять же в ответ true/false.
Поэтому к этому результату не аппендинтся элемент elem.
Я бы так написала ваш код:
document.addEventListener('mouseover', function(event) {
let target = event.target;
// проверка - содержит ли элемент, над которым находится курсор, класс "box"
// если нет, то выход
if (!target.classList.contains('box')) {
return;
}
let tooltip = target.querySelector('button').dataset.tooltip;
console.log(tooltip);
var elem = document.createElement('div');
elem.className = 'tooltip';
elem.textContent = tooltip;
// добавление элемента в target
target.append(elem);
});
Но лучше ловить mouseover на кнопке, которая находится в div'е, т.е. добавить кнопкам класс
проверять target на этот класс, а tooltip добавлять в родителя кнопки:
document.addEventListener('mouseover', function(event) {
let target = event.target;
// проверка - содержит ли элемент класс button над которым находится курсор
// если нет, то выход
if (!target.classList.contains('button')) {
return;
}
let tooltip = target.dataset.tooltip;
console.log(tooltip);
var elem = document.createElement('div');
elem.className = 'tooltip';
elem.textContent = tooltip;
// добавление элемента в родителя target
target.parentElement.append(elem);
});
Средний