Подскажите как к такой разметке сделать всплывающую подсказку.
<table class="modelProperties"> <tr class=" grey"><td>Страна</td><td>Турция</td></tr><tr class="q123"><td class="specificationTextTableHd" colspan="2">Общие</td></tr><tr class=" grey"><td>Тип</td><td>Полноразмерная </td></tr><tr class=" "><td>Тип установки<div class="help_popup_trigger"><div class="popup help_popup default_popup"> <a class="close"></a> <div class="termHd">Тип установки посудомоечной машины</div> <p><b>Встраиваемая полностью посудомоечные машины</b> скрывается полностью, благодаря навешиваемой на нее кухонному фасаду. Панель управления у таких машин скрывается, чтобы бы получить к ней доступ нужно открыть дверцу.<br><b>Встраиваемые частично посудомоечные машины</b> скрываются за фасадом кухни частично, открытой остается лишь панель управления, что упрощает управление устройством.</p> </div></div></td><td>Встраиваемая полностью </td></tr><tr class=" grey"><td>Класс мойки</td><td>A</td></tr><tr class=" "><td>Класс сушки</td><td>A</td></tr><tr class=" grey"><td>Вместимость посуды</td><td>13 комплектов </td></tr><tr class=" "><td>Тип сушки</td><td>Конденсационная </td></tr><tr class=" grey"><td>Уровень шума</td><td>44 дБ</td></tr>
чтобы при наведении на вопрос всплывала подсказка в теге <div class="help_popup_trigger">
Рони уже один раз помог сделать, но щас разметка изменилась никак немогу подобрать теги полный ноль в этом.
<script>
[].forEach.call(document.querySelectorAll('.leftn'), function(item) {
item.addEventListener('mouseover', function() {
var span = item.querySelector('.tips + span');
span.style.display = ''
});
item.addEventListener('mouseout', function() {
var span = item.querySelector('.tips + span');
span.style.display = 'none'
});
});
</script>