Всплывающие окна
Ребята, всем привет!
Вопрос такой, есть код, где прописано, что tooltip выводится либо вверх, либо вниз. Мне надо сделать, чтобы он выводился еще влево и вправо. Как это можно реализовать? Вот код: <script> $(document).ready(function(){ // Устанавливаем ширину и высоту контейнера в соответствии с размерами изображения $('#wrapper').css({'width':$('#wrapper img').width(), 'height':$('#wrapper img').height() }) //Направление символа подсказки var tooltipDirection; for (i=0; i<$(".pin").length; i++) { // Устанавливаем направление символа подсказки - вверх или вниз if ($(".pin").eq(i).hasClass('pin-down')) { tooltipDirection = 'tooltip-down'; } else { tooltipDirection = 'tooltip-up'; } // Добавляем подсказку $("#wrapper").append("<div style='left:"+$(".pin").eq(i).data('xpos')+"px;top :"+$(".pin").eq(i).data('ypos')+"px' class='" + tooltipDirection +"'>\ <div class='tooltip'>" + $(".pin").eq(i).html() + "</div>\ </div>"); } // Выводим/скрываем подсказку $('.tooltip-up, .tooltip-down ').mouseenter(function(){ $(this).children('.tooltip').fadeIn(100); }).mouseleave(function(){ $(this).children('.tooltip').fadeOut(100); }) }); </script> |
|
Спасибо! Правда за неимение опыта программирования скриптов, не очень понимаю, что делать.
1. Я правильно понимаю, что в коде ниже, выводится основная информация? Но как туда добавить вывод еще + двух элементов pin-left и pin-right)? // Устанавливаем направление символа подсказки - вверх или вниз if ($(".pin").eq(i).hasClass('pin-down')) { tooltipDirection = 'tooltip-down'; } else { tooltipDirection = 'tooltip-up'; } 2. В случае второго блока какие-то изменения надо вносить? // Добавляем подсказку $("#wrapper").append("<div style='left:"+$(".pin").eq(i).data('xpos')+"px;top :"+$(".pin").eq(i).data('ypos')+"px' class='" + tooltipDirection +"'>\ <div class='tooltip'>" + $(".pin").eq(i).html() + "</div>\ </div>"); } 3.В этом блоке я так понимаю необходимо сделать так?: // Выводим/скрываем подсказку $('.tooltip-up, .tooltip-down, .tooltip-left, .tooltip-right').mouseenter(function(){ $(this).children('.tooltip').fadeIn(100); }).mouseleave(function(){ $(this).children('.tooltip').fadeOut(100); }) }); |
Vanadik,
пока смутно представляю что вы хотите, возможно обычный hover для которого достаточно css. Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Рони,
Возможно так будет более нагляднее - это ссылка на демо источник, на его базе я работаю сейчас - https://ruseller.com/lessons/les1310/demo/index.html. Там подсказки всплывают либо вверх, либо вниз, а мне надо еще, чтобы они всплывали также влево и вправо. А это ссылка, где есть сам код: https://ruseller.com/lessons.php?rub_id=2&id=1310 |
Проделан огромный фронт работы, а в итоге есть точки с краев экрана, и всплывающая подсказка при данном выводе заходит за края экрана, в итоге половину подсказки не видно.
|
Цитата:
|
old title facepalm
Vanadik,
это надо делать на css!!! Цитата:
<!DOCTYPE html> <html> <head> <title>Интерактивные подсказки с использованием CSS3 и jQuery</title> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ // Устанавливаем ширину и высоту контейнера в соответствии с размерами изображения $('#wrapper').css({'width':$('#wrapper img').width(), 'height':$('#wrapper img').height() }) //Направление символа подсказки var tooltipDirection; for (i=0; i<$(".pin").length; i++) { // Устанавливаем направление символа подсказки tooltipDirection = $(".pin").eq(i).data('tooltip'); // Добавляем подсказку $("#wrapper").append("<div style='left:"+$(".pin").eq(i).data('xpos')+"px;top:"+$(".pin").eq(i).data('ypos')+"px' class='title " + tooltipDirection +"'>\ <div class='tooltip'>" + $(".pin").eq(i).html() + "</div>\ </div>"); } // Выводим/скрываем подсказку $('.title').mouseenter(function(){ $(this).children('.tooltip').fadeIn(100); }).mouseleave(function(){ $(this).children('.tooltip').fadeOut(100); }) }); </script> <style> body { text-align: center; font: 13px Arial,Helvetica; } /* Относительное позиционирование */ #wrapper { position: relative; margin: 50px auto 20px auto; border: 1px solid #fafafa; -moz-box-shadow: 0 3px 3px rgba(0,0,0,.5); -webkit-box-shadow: 0 3px 3px rgba(0,0,0,.5); box-shadow: 0 3px 3px rgba(0,0,0,.5); } /* Скрываем оригинальное содержание подсказки */ .pin { display: none; } /* Стили для подсказкии и метки */ .tooltip-up, .tooltip-down, .tooltip-left, .tooltip-right{ position: absolute; background: url(https://ruseller.com/lessons/les1310/demo/arrow-up-down.png); width: 36px; height: 52px; } .tooltip-down { background-position: 0 -52px; } .tooltip { display: none; width: 200px; cursor: help; text-shadow: 0 1px 0 #fff; position: absolute; top: 10px; left: 50%; z-index: 999; margin-left: -115px; padding:15px; color: #222; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 3px 0 rgba(0,0,0,.7); -webkit-box-shadow: 0 3px 0 rgba(0,0,0,.7); box-shadow: 0 3px 0 rgba(0,0,0,.7); background: #fff1d3; background: -webkit-gradient(linear, left top, left bottom, from(#fff1d3), to(#ffdb90)); background: -webkit-linear-gradient(top, #fff1d3, #ffdb90); background: -moz-linear-gradient(top, #fff1d3, #ffdb90); background: -ms-linear-gradient(top, #fff1d3, #ffdb90); background: -o-linear-gradient(top, #fff1d3, #ffdb90); background: linear-gradient(top, #fff1d3, #ffdb90); } .tooltip::after { content: ''; position: absolute; top: -10px; left: 50%; margin-left: -10px; border-bottom: 10px solid #fff1d3; border-left: 10px solid transparent; border-right :10px solid transparent; } .tooltip-down .tooltip { bottom: 12px; top: auto; } .tooltip-down .tooltip::after { bottom: -10px; top: auto; border-bottom: 0; border-top: 10px solid #ffdb90; } .tooltip h2 { font: bold 1.3em 'Trebuchet MS', Tahoma, Arial; margin: 0 0 10px; } .tooltip ul { margin: 0; padding: 0; list-style: none; } .tooltip-left { background-position: 0px 1px; transform: rotate(90deg); } .tooltip-left .tooltip::after { bottom: -10px; top: auto; border-bottom: 0; border-left: 10px solid #ffdb90; } .tooltip-left .tooltip { transform: rotate(-90deg); left: 20px; top: 84px; } .tooltip-right { background-position: 0px 51px; transform: rotate(90deg); } .tooltip-right .tooltip::after { bottom: -10px; top: auto; border-bottom: 0; border-left: 10px solid #ffdb90; } .tooltip-right .tooltip { transform: rotate(-90deg); left: 20px; top: -122px; right: } </style> </head> <body> <div id="wrapper"> <img width="920" height="450" src="https://ruseller.com/lessons/les1310/demo/world-map.jpg" alt="Карта мира"> <div class="pin pin-down" data-xpos="170" data-ypos="100" data-tooltip="tooltip-right"> <h2>Северная Америка</h2> <ul> <li><b>Площадь (кв.км):</b> 24,490,000</li> <li><b>Население:</b> 528,720,588</li> </ul> </div> <div class="pin" data-xpos="270" data-ypos="320"> <h2>Южная Америка</h2> <ul> <li><b>Площадь (кв.км):</b> 17,840,000</li> <li><b>Население:</b> 382,000,000</li> </ul> </div> <div class="pin pin-down" data-xpos="450" data-ypos="110" data-tooltip="tooltip-left"> <h2>Европа</h2> <ul> <li><b>Площадь (кв.км):</b> 10,180,000</li> <li><b>Население:</b> 731,000,000 </li> </ul> </div> <div class="pin" data-xpos="450" data-ypos="250" data-tooltip="tooltip-up"> <h2>Африка</h2> <ul> <li><b>Площадь (кв.км):</b> 30,370,000</li> <li><b>Население:</b> 1,022,011,000</li> </ul> </div> <div class="pin pin-down" data-xpos="650" data-ypos="130" data-tooltip="tooltip-down"> <h2>Азия</h2> <ul> <li><b>Площадь (кв.км):</b> 43,820,000</li> <li><b>Население:</b> 3,879,000,000</li> </ul> </div> <div class="pin pin-down" data-xpos="750" data-ypos="310" data-tooltip="tooltip-left"> <h2>Австралия</h2> <ul> <li><b>Площадь (кв.км):</b> 9,008,500</li> <li><b>Население:</b> 31,260,000</li> </ul> </div> </div> </body> </html> |
Часовой пояс GMT +3, время: 07:13. |