Форум

maxtelt · #1 (**permalink**) 03.04.2017, 23:42

Подскажите как к такой разметке сделать всплывающую подсказку.

<table class="modelProperties"><tr> <td class="leftn"><span>Габариты (ВхШхГ) (см)</span></td> <td><span>185х59,5х64,2</span></td> </tr> <tr> <td class="leftn"><span>Холодильника (л)</span> <img src="/img/ob_question2.gif" class="tips" desc="35"><span style="display:none" id="tth_desc_35"><b>Общий объем холодильника</b> - объем с учетом полок и другого внутреннего оборудования (выступов, панелей и т.д.).<b>Полезный объем холодильника</b> - суммарный внутренний объем всех отделений, пригодных для хранения продуктов.</span> </td> <td><span>- / 318</span></td> </tr> <tr> <td class="leftn"><span>Холодильной камеры (л)</span> <img src="/img/ob_question2.gif" class="tips" desc="39"><span style="display:none" id="tth_desc_39"><b>Общий объем холодильной камеры</b> - объем с учетом полок и другого внутреннего оборудования (<b>значение дано с учетом зоны свежести при ее наличии</b>).<b>Полезный объем холодильной камеры</b> - объем за вычетом полок и другого внутреннего оборудования, пригодный для хранения продуктов (<b>значение дано с учетом зоны свежести при ее наличии</b>).</span> </td> <td><span>- / 226</span></td> </tr></table>

чтобы при наведении на вопрос всплывала подсказка в теге <span style="display:none">

рони · #2 (**permalink**) 04.04.2017, 01:18

maxtelt,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

</head>

<body>
<table class="modelProperties" onmouseover="">
    <tr>
        <td class="leftn"><span>Габариты (ВхШхГ) (см)</span></td>
        <td><span>185х59,5х64,2</span></td>
    </tr>
    <tr>
        <td class="leftn"><span>Холодильника (л)</span> <img src="/img/ob_question2.gif" class="tips" desc="35"><span style="display:none" id="tth_desc_35"><b>Общий объем холодильника</b> - объем с учетом полок и другого внутреннего оборудования (выступов, панелей и т.д.).<b>Полезный объем холодильника</b> - суммарный внутренний объем всех отделений, пригодных для хранения продуктов.</span> </td>
        <td><span>- / 318</span></td>
    </tr>
    <tr>
        <td class="leftn"><span>Холодильной камеры (л)</span> <img src="/img/ob_question2.gif" class="tips" desc="39"><span style="display:none" id="tth_desc_39"><b>Общий объем холодильной камеры</b> - объем с учетом полок и другого внутреннего оборудования (<b>значение дано с учетом зоны свежести при ее наличии</b>).<b>Полезный объем холодильной камеры</b> - объем за вычетом полок и другого внутреннего оборудования, пригодный для хранения продуктов (<b>значение дано с учетом зоны свежести при ее наличии</b>).</span> </td>
        <td><span>- / 226</span></td>
    </tr>
</table>
 <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>

</body>
</html>

maxtelt · #3 (**permalink**) 04.04.2017, 12:46

Спасибо большое, но никак не могу заставить работать, кладу скрипт в шаблон перед тегом </head>. Может подскажите как лучше сделать. Virtuemart 2.5

maxtelt · #4 (**permalink**) 04.04.2017, 12:55

Все заработало, положил как у Вас перед </body>, еще раз спасибо, что нужно чтобы все-таки это было окошко, которое можно залить определенным цветом.

maxtelt · #5 (**permalink**) 04.04.2017, 13:12

Со стилями разобрался.

Форум

Справочник

Discord чат

Курсы javascript