首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何更新移动对象的引导(工具提示)?

问如何更新移动对象的引导(工具提示)?
EN

Stack Overflow用户
提问于 2016-06-29 07:57:16
回答 1查看 46关注 0票数 1

我有一个移动的<div>对象。我想显示/更新这个tooltip info,比如说每个2s。它工作得很好,但即使对象移动了,位置也不会改变,tooltip保持初始位置并保持不变(对不起,我没有提供一个有效的例子)。

如何更新其位置以跟随<div> (而不是鼠标)?

EN

回答 1

Stack Overflow用户

发布于 2016-06-29 08:07:30

event.pageX和event.pageY

下面的描述用于event.pageX描述:鼠标相对于文档左边缘的位置。

下面是我在一个应用程序中使用的代码。

您可以在鼠标悬停事件上显示下面的div。

代码语言:javascript
复制
date.selectAll("rect")
    .data(function(d) {
        return d.mattel_data;
    })
    .enter().append("rect")
    .attr("width", x.rangeBand())
    .attr("y", function(d) {
        return y(d.y1);
    })
    .attr("height", function(d) {
        return y(d.y0) - y(d.y1);
    })
    .style("fill", function(d) {
        return color(d.name);
    })
    .on("mouseover", function(d) {
        div.transition()
            .duration(100)
            .style("opacity", .9);
            var hoverVal = (d.y1 - d.y0);
            var formatter = new Intl.NumberFormat('en-US',{
              style : 'currency',
              currency : 'USD',
              minimumFractionDigits : 2,
            });
            var pop = formatter.format(hoverVal);
            // console.log(pop);
            div.html("Value:" + pop + "<br/>" + d.name)
            .style("left", (d3.event.pageX - 140) + "px")
            .style("top", (d3.event.pageY - 80) + "px")
            .style('position', 'absolute')
            .style('font-size', '15px')
            .style('background', function() {
                return color(d.name);
            })
            .style('color', function() {
                return getContrastYIQ(color(d.name));
            })
    })
    .on("mouseout", function(d) {
        div.transition()
            .duration(200)
            .style("opacity", 0);
    });

看看这对你有没有帮助。此外,如果你在这里发布你的代码,这将有助于更清楚地理解你的问题

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/38088139

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档