image map area with panzoom & tooltip

Question

There is a simple map of the image with the tooltip when clicking on the area and the possibility of in / out 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/[email protected]/dist/css/tooltipster.bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 the tooltipster plugin for the tooltip.

At the initial position, everything works fine, but when you increase (click on +) the tooltips opens not near the object (area).

$('.plan-modal').tooltipster('reposition'); - not working;

Question: How can I use panzoom and tooltip together so that when I zoom in / out, the tooltip takes the correct position next to the corresponding area?

panzoom for zooming an image map.

Futhark