[Vuejs]-How to have tooltip follow cursor when hovering on bar

by

0👍

would be best if you share a working example of your code in a Sandbox/JSBin or similar. Then it is easier to help.

But one thing:
in v4 of d3

d3.mouse(container)

Returns the x and y coordinates of the current event relative to the
specified container.

What you want is d3.event.pageX which gives you:

An integer value, in pixels, indicating the X coordinate at which the mouse pointer was located when the event occurred. This value is relative to the left edge of the entire document, regardless of the current horizontal scrolling offset of the document.

But to be certain I would need to see a working example to try this out.

0👍

For D3 v4 specifically:

Append a div using d3: 

const tooltip = d3
      .select('body')
      .append('div')
      .attr('class', 'tooltip');

Now Add a mousemove and mouseout listener: 

  d3.on('mousemove', () => {
    return tooltip
      .style('top', d3.event.pageY - 30 + 'px')
      .style('left', d3.event.pageX + 'px');
  })
  .on('mouseout', function() {
    d3.select(this)
      .transition()
      .duration(this.transitionDuration * 0.2)
      .style('fill', `green`);
    return tooltip.style('visibility', 'hidden');
  });

Leave a comment