Wie aktualisiert man den Bootstrap (Tooltip) eines sich bewegenden Objekts?

Question

Ich habe ein bewegliches Objekt <div>. Ich möchte diese tooltip info zeigen/aktualisieren, sagen wir mal alle 2s. Es funktioniert gut, aber die Position ändert sich nicht, selbst wenn sich das Objekt bewegt hat, die tooltip behält die Anfangsposition bei und bleibt statisch (es tut mir leid, dass ich kein funktionierendes Beispiel angegeben habe).

Wie kann ich seine Position aktualisieren, um die <div> (nicht die Maus) zu folgen?

Answer 1

event.pageX und event.pageY

Die nachstehende Beschreibung ist für event.pageX Beschreibung: Die Mausposition relativ zum linken Rand des Dokuments.

Unten ist der Code, den ich in einer meiner Anwendung verwendet hatte.

Sie können das div unten bei einem Mouseover-Ereignis anzeigen.

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

Sehen Sie, wenn das Ihnen hilft. Auch wenn Sie hier Ihren Code posten, der hilft, Ihr Problem klarer zu verstehen