JQuery와 툴팁 Qtip - 내가 Qtip 설치 한

Question

툴팁에 대한 다른 위치를 표적으로지도에 툴팁을 위해 그것을 사용하는 방법 :

http://www.gregquinn.com/oneworld/about_people6.html

당신은 레드 핀을 롤오버 툴팁을 볼 수 있습니다

그 지금 거기에있다.

하지만 "이탈리아"라는 단어 (왼쪽 텍스트)를 롤오버하면 이탈리아의 빨간 핀 옆에 같은 툴팁이 나타납니다. 당신은 위치 (position: { target: $('ul:first li:last') })를 타겟팅 할 수 있습니다 말한다 Qtip documentation

<script class="example" type="text/javascript"> 
// Create the tooltips only when document ready 
$(document).ready(function() 
{ 
// We'll target all AREA elements with alt tags (Don't target the map element!!!) 
$('area[alt]').qtip(
{ 
    content: { 
     attr: 'alt' // Use the ALT attribute of the area map for the content 
    }, 
    style: { 
     classes: 'ui-tooltip-tipsy ui-tooltip-shadow ui-tooltip-light' 
    } 
}); 
}); 
</script> 

을하지만 난 몰라 :지도에 레드 핀에 대한

, 그래서 같이 툴팁을 트리거 ALT 태그로 이미지 맵을 사용하고 있습니다 이를 수행하는 방법 또는지도 좌표를 대상으로하고 이들 모두를 한 페이지에 둘 수 있습니까?

Answer 1

대상으로 지정할 특정 qtip의 show 메서드를 트리거하는 왼쪽의 텍스트에 hover 이벤트를 사용할 수 있어야합니다.

귀하의 HTML에 링크를 추가하고 데이터 속성을 추가해야합니다.

<span class="qt-pointer" data-country="italy">Italy</span> 
<span class="qt-pointer" data-country="kenya">Kenya</span> 

자바 스크립트는 다음과 같이 갈 것이다 : 당신의 qtip 지역은 QT-포인터의 데이터 국가 속성에 해당하는 ID를 가지고 있어야

$('.qt-pointer').hover(function() { 
    // on hover 
    $('#' + $(this).data('country')).qtip("show"); 
}, function() { 
    // on exit 
    $('#' + $(this).data('country')).qtip("hide"); 
}); 

. 나는 qtip을 사용하지 않았으므로 위의 코드를 의사 코드로 취급하십시오. 그것이 당신의 문제를 푸는 데 도움이되기를 바랍니다.