Всплывающая подсказка
Подскажите как к такой разметке сделать всплывающую подсказку.
<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"> |
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> |
Спасибо большое, но никак не могу заставить работать, кладу скрипт в шаблон перед тегом </head>. Может подскажите как лучше сделать. Virtuemart 2.5
|
Все заработало, положил как у Вас перед </body>, еще раз спасибо, что нужно чтобы все-таки это было окошко, которое можно залить определенным цветом.
|
Со стилями разобрался.
|
Часовой пояс GMT +3, время: 02:04. |