Tултип с tooltipster плагин на карте изображения с panzoom

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>