움직이는 물체의 부트 스트랩 (툴팁)을 업데이트하는 방법은 무엇입니까?

Question

나는 움직이는 <div> 개체가 있습니다. 나는이 tooltip info를 보여 주거나 업데이트하고 싶습니다. 모두 2s라고 말해 봅시다. 그것은 잘 작동하지만, 개체가 움직였다하더라도 위치는 변하지 않습니다. tooltip은 초기 위치를 유지하고 정적 상태를 유지합니다 (실례는 제공하지 않았습니다).

<div> (마우스가 아님)을 따르도록 위치를 업데이트 할 수 있습니까?

Answer 1

event.pageX 및 event.pageY

설명은 아래 event.pageX 설명이다 문서의 왼쪽 가장자리로 마우스 상대적인 위치.

다음은 내 응용 프로그램에서 사용한 코드입니다.

mouseover 이벤트에서 아래 div를 표시 할 수 있습니다.

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

도움이되는지 확인하십시오. 또한 여기에 코드를 게시하면 문제를보다 명확하게 이해하는 데 도움이됩니다.