Hiển thị tooltip trên di chuyển div qua hình ảnh

Question

Những gì tôi có là:

1. Tôi có một hình ảnh của một biểu đồ pie cho thấy
2. Tôi có một bản đồ hình ảnh của biểu đồ pie
3. Trình duyệt mặc định tooltip được hiển thị trên di chuyển chuột lên ảnh

những gì tôi đang cố gắng làm là:

0.123.

1. Mở biểu đồ hình tròn lát touchmove, di chuyển xanh Marker (một div) trên một đường tròn tương đối so với biểu đồ pie

Những gì tôi muốn đạt được:

1. Hoặc chương trình chú giải công cụ trình duyệt mặc định khi di chuyển hình tròn div sang biểu đồ tròn
2. Hiển thị giá trị của các khu vực của bánh khi di chuyển Điểm đánh dấu màu xanh lá cây (div) xung quanh hình ảnh

Làm cách nào để đạt được điều này?

Một số Code:
Fiddle Link: 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

Đáng ngạc nhiên, vấn đề của bạn có thể được giải quyết chỉ với CSS (lưu ý, tôi đã không kiểm tra nếu điều này làm việc trong một thiết bị cảm ứng, nhưng nó nên):

area { 
    display:block; 
    position: absolute; 
} 

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

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

Tuy nhiên, nếu bạn muốn giữ lại javascript cho tính linh hoạt, bạn không thực sự cần phải kiểm tra trạng thái kéo vì touchmove ngụ ý rằng ngón tay được nhấn. Bạn không nên cần sự kiện tải cửa sổ lồng nhau (không kích hoạt trong Chrome, dù sao). Điều này đơn giản hóa mã một chút.

$(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')); 
}); 

}); 

Bạn có thể thấy cả hai hiện thực trong hành động ở đây: http://jsfiddle.net/Wz7fF/

Answer 2

Tại sao bạn không sử dụng một thư viện chuẩn như HighCharts và để cho nó xử lý các thông tin tooltip mà bạn muốn trưng bày.