Как правильно вставить блок?

Question

[intriga93]

elem в .box
9 строка
https://jsfiddle.net/5nvj3Lsb/

Answer 1

[Евгения Сипидина]

Данная строка не корректно написана - первая часть 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);
});

Comments

[intriga93]

Евгения Сипидина, это да
но блоки почему то не убираются
как убрали с кнопки курсор
https://jsfiddle.net/5nvj3Lsb/2/

[Евгения Сипидина]

intriga93, не убираются, потому что не найдены. Сначала ищем, потом удаляем:

document.addEventListener('mouseout', function(event) {
let elem = document.querySelector('.tooltip');
if (elem) {
elem.remove();
}
});

[intriga93]

Евгения Сипидина, спасибо Вам
извиняюсь, не подскажете?
Как найти элемент?