显示在图像上移动div的工具提示

Question

我拥有的是：

1. 我有一张饼图的图像
2. 我有饼图的图像映射
3. 鼠标移动到图像上时显示默认浏览器工具提示

我要做的是：

1. 在饼图切片touchmove上，相对于饼图在圆形路径上移动绿色标记（div）

我想要实现的目标：

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

但是，如果你想保持javascript的灵活性，你不需要检查拖动状态，因为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等标准库，让它处理您想要显示的工具提示信息。