Showing tooltip on moving div over image

Question

What I have is:

1. I have an image of a pie chart shown
2. I have an image map of the pie chart
3. The default browser tooltip is shown on mouse move over the image

What I am trying to do is:

1. On pie chart slice touchmove, move the Green Marker (a div) on a circular path relative to the pie chart

What I want to achieve:

1. Either show default browser tooltip on moving div circular to pie chart
2. Either show values of the areas of pie on moving the Green Marker(div) around the image

How do I achieve this ?

Some 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
});

Telegraphy

Got any code with you? A fiddle would be awesome! :) – Meredith

@Praveen Kumar : Added fiddle link and some code. – Telegraphy

Answer 1

Surprisingly, your problem can be solved with CSS only (note, I haven't checked if this works in a touch device, but it should):

area {
    display:block;
    position: absolute;
}

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

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

However, if you want to keep javascript for flexibility, you don't really need to check the dragging state since touchmove implies that the finger is pressed. You shouldn't need the nested window load event (which doesn't fire in Chrome, anyways). This simplifies the code a bit.

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

});

You can see both implementations in action here: http://jsfiddle.net/Wz7fF/

Nerve

Answer 2

Why are you not using a standard library such as HighCharts and let it handle the tooltip information that you want to display.

Vertical

Because Highcharts is not what we need.The charts are generated using jFree,and that can't be changed. – Telegraphy