There is a simple image map with a tooltip when clicking on an area and the possibility of increasing / decreasing this map:

 var $section = $('.plan'); $('.panzoom').panzoom({ $zoomIn: $section.find(".zoom-in"), $zoomOut: $section.find(".zoom-out"), $zoomRange: $section.find(".zoom-range"), $reset: $section.find(".reset"), startTransform: 'scale(1)', increment: 0.1, minScale: 1, contain: 'invert', maxScale: 5, focal: { clientX: 0, clientY: 0 }, onEnd: function(){ X(); } }).panzoom('zoom', true); $('map area').each(function(i,e){ // console.log( $(e).data('status') ); var data = $(e).data('maphilight') || {}; data.fillColor = 'db2205'; switch( $(e).data('status') ){ case 'sales': data.fillColor = 'db2205'; data.strokeColor = 'db2205'; data.fillOpacity = 0.5; break; case 'free': data.fillColor = '98c13c'; data.strokeColor = '98c13c'; data.fillOpacity = 0; break; } $(e).data('maphilight', data); }); var resizeEvt; $(document).on('ready.usemaps', function(){ $('#image-map').maphilight({alwaysOn: true}); $('map').imageMapResize(); }); $(window).on('resize.usemaps', function(){ clearTimeout(resizeEvt); resizeEvt = setTimeout(function(){ $('#image-map').maphilight({alwaysOn: true}); }); }); $('map').imageMapResize(); $('#image-map').maphilight({alwaysOn: true}); $(window).on('resize', function () { clearTimeout(resizeEvt); resizeEvt = setTimeout(function () { $('#image-map').maphilight({alwaysOn: true}); }); }); function X(){ $('.plan-modal').tooltipster({ trigger: 'click', maxWidth: 280, functionInit: function(instance, helper){ var $origin =$(helper.origin), planTitle = $origin.attr('alt'), status = $origin.attr('data-status'); var content; if(status === 'free') { content = $('<div class="plan-b">' + '<h5 class="plan-b__top">'+planTitle+'</h5>'+ '</div>'); } instance.content(content); }, fnctionReady: function(instance, helper){ }, interactive: true, }); } X(); 
 .panzoom-wrap { width: 480px; border:orangered; } .panzoom-wrap { position: relative; } 
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tooltipster@4.2.6/dist/css/tooltipster.bundle.min.css"> <script src="https://cdn.jsdelivr.net/npm/tooltipster@4.2.6/dist/js/tooltipster.bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/3.2.2/jquery.panzoom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.7/js/imageMapResizer.min.js"></script> <div class="container plan"> <!-- <img src="https://images.unsplash.com/photo-1533629663071-038eb2b96fcf?ixlib=rb-0.3.5&s=678eb638dc03df4a34fc1f481983698f&auto=format&fit=crop&w=1950&q=80" alt=""> --> <div class="panzoom-wrap"> <div class="parent"> <div class="panzoom"> <img src="https://images.unsplash.com/photo-1533629663071-038eb2b96fcf?ixlib=rb-0.3.5&amp;s=678eb638dc03df4a34fc1f481983698f&amp;auto=format&amp;fit=crop&amp;w=1950&amp;q=80" usemap="#image-map" id="image-map" class="plan _map" width="480"> <map name="image-map"> <area href="#plan" id="plan-1" target="" alt="1" title="1" href="1" coords="248,762,117" data-status="free" class="plan-modal" shape="circle"> <area href="#plan" id="plan-2" target="" alt="2" title="2" href="2" coords="967,818,128" data-status="free" class="plan-modal" shape="circle"> <area href="#plan" id="plan-3" target="" alt="3" title="3" href="3" coords="1547,698,53" data-status="free" class="plan-modal" shape="circle"> </map> </div> </div> <div class="buttons genplan-buttons"> <button class="zoom-in">+</button> <button class="zoom-out">-</button> </div> </div> </div>

I use tooltipster plugin for tooltips. panzoom for zooming image maps.

With the initial position, everything works fine, but with an increase (click on + ), the tooltipster does not open next to the object ( area ).

Question: How to use panzoom and tooltip together at the same time so that when you increase / decrease the picture, the tooltip correct position next to the corresponding area ?

    1 answer 1

    At one of the increases, while it is not working quite right (Try adding this function to the tooltipster:

     functionPosition: function(instance, helper, position) { var matrix = $(".panzoom").panzoom('getMatrix'); console.log(matrix); var elem = document.getElementById(helper.origin.id); var elemCoords = document.getElementById(helper.origin.id).coords.split(","); console.log(elemCoords); var panZoomElemRect = document.getElementById("panzoom").getBoundingClientRect(); console.log(panZoomElemRect); var tmpX = parseFloat(elemCoords[0])*parseFloat(matrix[0]); var tmpY = parseFloat(elemCoords[1])*parseFloat(matrix[0]); var tmpRad = parseFloat(elemCoords[2])*parseFloat(matrix[0]); console.log([tmpX, tmpY, tmpRad]); position.coord.left = tmpX - 20 + panZoomElemRect.x; position.coord.top = tmpY - 60/parseFloat(matrix[0]) - tmpRad + panZoomElemRect.y; if(position.coord.left < 150 && position.coord.left > 150-tmpRad){ position.coord.left = 160; } if (position.coord.left > 150+480 && position.coord.left < 150+480+tmpRad){ position.coord.left = 150+480 - 20; } if (position.coord.top < 0 && position.coord.top > -tmpRad){ position.coord.top = 0; } if (position.coord.top > 320 && position.coord.top < 320 + tmpRad){ position.coord.top = 320-60/parseFloat(matrix[0]) - tmpRad; } console.log(position.coord); return position; },

    There is a bit of hardcode in it: tmp - 20 and tmpY - 50 - these are just sizes for the tooltip, they just need to calculate both the position and size values ​​for panzoom div

    I will try to do it more universally, but at least it can help in solving the problem.