Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Всплывающая подсказка (https://javascript.ru/forum/dom-window/68959-vsplyvayushhaya-podskazka.html)

maxtelt 20.05.2017 12:36

Всплывающая подсказка
 
Подскажите как к такой разметке сделать всплывающую подсказку.
<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>

рони 20.05.2017 12:47

maxtelt,
[].forEach.call(document.querySelectorAll('.help_popup_trigger'), function(item) {
        item.parentNode.addEventListener('mouseover', function() {
           item.style.display = 'block'
        });
        item.parentNode.addEventListener('mouseout', function() {
           item.style.display = 'none'
        });
 });


Часовой пояс GMT +3, время: 11:13.