Форум

Vanadik · #1 (**permalink**) 26.05.2020, 12:28

Ребята, всем привет!
Вопрос такой, есть код, где прописано, что 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>

рони · #2 (**permalink**) 26.05.2020, 13:58

Vanadik,
https://jqueryui.com/tooltip/#default

Vanadik · #3 (**permalink**) 26.05.2020, 16:41

Спасибо! Правда за неимение опыта программирования скриптов, не очень понимаю, что делать.

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);
})
});

рони · #4 (**permalink**) 26.05.2020, 17:02

Vanadik,
пока смутно представляю что вы хотите, возможно обычный hover для которого достаточно css.
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Vanadik · #5 (**permalink**) 26.05.2020, 17:51

Рони,
Возможно так будет более нагляднее - это ссылка на демо источник, на его базе я работаю сейчас - https://ruseller.com/lessons/les1310/demo/index.html. Там подсказки всплывают либо вверх, либо вниз, а мне надо еще, чтобы они всплывали также влево и вправо.
А это ссылка, где есть сам код: https://ruseller.com/lessons.php?rub_id=2&id=1310

Vanadik · #6 (**permalink**) 26.05.2020, 17:54

Проделан огромный фронт работы, а в итоге есть точки с краев экрана, и всплывающая подсказка при данном выводе заходит за края экрана, в итоге половину подсказки не видно.

рони · #7 (**permalink**) 26.05.2020, 18:15

Сообщение от Vanadik

также влево и вправо.

так допишите в css пару строк и в js пару классов. смотрите свой пример там всё есть, но можно и без js всё сделать

рони · #8 (**permalink**) 26.05.2020, 19:14

Vanadik,
это надо делать на css!!!

Сообщение от рони

допишите в css пару строк и в js

<!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>

Форум

Справочник

Discord чат

Курсы javascript