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

Posted 2023-05-08

【中文标题】在图像上移动 div 时显示工具提示

【英文标题】：Showing tooltip on moving div over image

【发布时间】：2013-01-22 15:17:20

【问题描述】：

我拥有的是：

我显示了一张饼图的图像 我有一张饼图的图像地图 鼠标移到图片上时会显示默认浏览器工具提示

我想做的是：

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

我想要达到的目标：

在将 div 圆形移动到饼图时显示默认浏览器工具提示 在图像周围移动绿色标记 (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
);

【问题讨论】：

你有任何代码吗？ fiddle 会很棒！ :)

@Praveen Kumar：添加小提琴链接和一些代码。

【参考方案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/

【参考方案2】：

您为什么不使用诸如 HighCharts 之类的标准库并让它处理您要显示的工具提示信息。

【讨论】：

因为Highcharts不是我们需要的。图表是使用jFree生成的，无法更改。