이 이미지 위에 DIV를 이동에 툴팁을 표시

Question

내가 가지고있는 것은 :

1. 나는 원형 차트
2. 기본 브라우저의 이미지 맵을
3. 표시된 원형 차트의 이미지가 툴팁은 이미지 위에 마우스 이동에 표시됩니다

내가 뭘하려고 수 있습니다 :

파이 차트 조각하는 TouchMove에

1. , 파이 차트 원형 상대 경로에 녹색 마커 (사업부)를 이동 내가 무엇을 달성하고자하는

:

1. 어느 쇼 div 원형 차트에서 원형 차트로 이동하는 기본 브라우저 툴팁
2. 이미지 주위에 녹색 마커 (div)를 움직일 때 파이 영역의 값을 표시하십시오.

어떻게해야합니까?

일부 코드 :
바이올린 링크 : here

$("img").bind("touchmove",function(event) { 
    e=event.originalEvent; 
    x1 = e.pageX; 
    y1 = e.pageY; 
    x = x1 - x0; 
    y = y1 - y0; 

    r = 180 - ((180/Math.PI) * Math.atan2(y,x)); 

    $("#marker").css('-webkit-transform','rotate(-'+r+'deg) translate(-160px)'); 

    // Code to show values of Pie as a tooltip or in a separate div 
}); 

Answer 1

놀랍게도, 문제는 CSS에서만 해결 될 수있다 (참고,이 터치 디바이스에서 작동하는지 내가 확인하지 않은,하지만해야) :

area { 
    display:block; 
    position: absolute; 
} 

area:after { 
    background: red; 
    color: white; 
    position: absolute; 
    display: block; 
    white-space: nowrap; 
} 

area:hover:after { 
    content: attr(title); 
} 

그러나, 당신은 자바 스크립트를 유지하려는 경우 유연성을 위해 touchmove는 손가락이 눌려 졌기 때문에 드래그 상태를 확인할 필요가 없습니다. 중첩 된 윈도우로드 이벤트 (Chrome에서는 실행되지 않음)가 필요하지 않습니다. 이렇게하면 코드가 단순 해집니다.

$(document).ready(function(){ 
    var angle=180; 
    var x0, y0; 
    var x, y, x1, y1, drag = 0; 
    var content=$("#content"); 
    var img=$("#myimage"); 
    var imgpos = img.position(); 
    var marker = $("#marker"); 
    var info = $("#info"); 


    $(document).bind('touchmove touchstart',function(e){ 

     e.originalEvent.preventDefault(); 
    }); 

    img.removeAttr("width"); 
    img.removeAttr("height"); 

    x0 = imgpos.left + (img.width()/2); 
    y0 = imgpos.top + (img.height()/2); 

content.on("touchmove mousemove", "map", function(event) { 
    e=event.originalEvent; 
    x1 = e.pageX; 
    y1 = e.pageY; 
    x = x1 - x0; 
    y = y1 - y0; 
    r = 180 - ((180/Math.PI) * Math.atan2(y,x)); 
    marker.css('-webkit-transform','rotate(-'+r+'deg) translate(-160px)'); 
    info.text(event.target.getAttribute('title')); 
}); 

}); 

현재 작업을 모두 구현을 볼 수 http://jsfiddle.net/Wz7fF/

Answer 2

왜 당신이 그런 HighCharts 같은 표준 라이브러리를 사용하고 당신이 원하는 툴팁 정보를 처리 할 수 ​​없습니다 디스플레이.