CODEWITHSUNDEEP
csstooltipjqueryimagemap
Nagesh Salunke
Nagesh Salunke

Reputation: 1288

Showing tooltip on moving div over image

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 ?

Current Pie Chart

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

Upvotes: 6

Views: 793

Answers (2)

methodofaction
methodofaction

Reputation: 72435

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/

Upvotes: 5

Rahul Kadukar
Rahul Kadukar

Reputation: 958

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

Upvotes: 0

Related Questions