在图像上移动 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 之类的标准库并让它处理您要显示的工具提示信息。