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>