ImageMapster javascript plugin tooltip이 올바른 위치를 표시하지 않습니다.

Question

그래서 플러그인 ImageMapster을 사용하고 있으며 툴팁을 사용하고 있습니다.

문제 : 툴팁을 사용할 때 당신이 내가 위로 마우스를 가져시피 당신이

아래 여기에서 볼 수있는 완전히 다른 재배치

나는이 플러그인이 문제는 진한 주황색 섹션과 툴팁은 텍스트 "Te huur"가있는 이미지 중간에 있습니다.

그리고 자바 스크립트 : 지적

$('#finder-image').mapster({ 
     fill: true, 
     fillColor: 'ffffff', 
     fillOpacity: 0, 
     strokeWidth: 3, 
     singleSelect: false, 
     isSelectable: false, 
     scaleMap: true, 
     altImage: '{{asset('images/map2.svg')}}', 
     selected: true, 
     showToolTip: true, 
     toolTipContainer: '<div class="tooltip-wrapper"></div>', 
     mapKey: 'name', 
     render_highlight: { 
      fillOpacity: 1 
     }, 
     onMouseover: function (options) { 
      $("#finder-" + options.key).children().css('color', "#EF8000"); 
      $("#finder-" + options.key).children().css('font-weight', "bold"); 
     }, 
     onMouseout: function (options) { 
      $("#finder-" + options.key).children().css('color', "black"); 
      $("#finder-" + options.key).children().css('font-weight', "normal"); 

      }, 
      areas: [ 
       { 
        key: '21', 
        toolTip: '<img src 
        {{asset('/images/finder/icon_huur_1.png')}}" class="img-responsive pop-image">' 
       } 
        ] 
     }); 

: 나는 부분에 마우스를 가져 가면

때때로 나는 오류가 여기에

내가 가져 섹션의 예입니다. 다음과 같은 오류는 다음과 같습니다

Uncaught TypeError: Cannot read property '0' of undefined 
at showToolTip (jquery.imagemapster.js:4467) 
at m.AreaData.showToolTip (jquery.imagemapster.js:4559) 
at m.AreaData.<anonymous> (jquery.imagemapster.js:2733) 
at Function.each (jquery.js:374) 
at HTMLAreaElement.mouseover (jquery.imagemapster.js:2731) 
at HTMLAreaElement.me.mouseover (jquery.imagemapster.js:2925) 
at HTMLAreaElement.dispatch (jquery.js:4435) 
at HTMLAreaElement.r.handle (jquery.js:4121) 

이 자체 JS ImageMapster의 오류, 그것은 변수 모서리/툴팁이 설정되지 않은 것을 말한다.

Jquery.imagemapster.js :

Answer 1

As for the Uncaught TypeError: Cannot read property '0' of undefined error

툴팁 내의 화상 초기 페이지로드에로드되지 않는다. 즉, 툴팁을 가리키 자마자 이미지가로드되고 있음을 의미합니다 (처음으로).

이미지가 영역을 마자 마자로드되지 않기 때문에 플러그인은 toolTipContainer 내부의 데이터를 기반으로 높이/너비를 정의 할 수 없습니다.

초기 크기 (텍스트와 같은 로딩 시간이 http request) 인 요소를 툴팁 안에 추가하면 효과가 있습니다. 예를 들어

{ 
    key: '1', 
    toolTip: '<img src="{{asset('/images/finder/icon_kaart_0.png')}}" class="img-responsive pop-image"><div style="visibility: hidden;">Area</div>' 
},