Mouse hover events for tooltips in graph2d

[2dvisio]

I've got into the problem of adding tooltip to a complex Graph2d element (many many groups, because some items got to be connected by lines while others don't).

Solved it in two different ways. The less ugly one at the moment is using the click listener to get the closest point so as to display an HTML div with the tooltip text inside.

However, a much less ugly way of doing it (IMHO) could be one of these:

1. Adding an ID element to each SVG element (so that we could embed a click listener on those items and retrieve the tooltip content via the ID), the Dataset already attaches an UUID to each datapoint, why is that not linked inside the SVG elements?
2. Giving the possibility to add events listeners directly when creating the datapoint
3. adding arbitrary attributes to SVG elements via the corresponding datapoint

Let me know in any of this makes sense.

[mojoaxel]

@2dvisio Is this issue still relevant or can we close it?

[2dvisio]

Well. As I mentioned, I have found an hack to do this. The hack is really ugly as I have to compute the distance of each click on the plot with the points and get the closest point.
This makes the tooltip very hacky.

Having the possibility of adding attributes to the SVG single elements would be amazing as it will allow to leverage the HTML innate mechanisms to handle situations like mine.
I think this will positively affect the library, but if you have other priorities, feel free to close the issue.

Keep up the good work!

[mojoaxel]

@2dvisio So, adding the UUID from the DataSet as an attribute to the svg elements would help? I don't think that this would be difficult.
Also mouseover and mouseout events were introduced to the timeline with #1367. Maybe we can generalize this to work also with graph2d.

I'm going to clean up this issue and change it to a feature-request...

[2dvisio]

Mouseover and mouseout would make it easier I guess to manage the mouse events.

[2dvisio]

Is this embedded in 4.17 (and thus it has been removed)?
Or it is still open?

[2dvisio]

For potential solution-seekers, if your groups are defined in-order (and you know what that order is), you could attach a listener using the following:

var points = document.querySelectorAll('.vis-graph-group' + <INSERT_HERE_YOUR_ID> + '.vis-point');

for (var i = 0; i < points.length; i++) {
   points[i].addEventListener('click', function(event) {
      if (!confirm("You clicked me! " + this.cx + ',' + this.cy )) {
         event.preventDefault();
      }
   });
}

In place of the <INSERT_HERE_YOUR_ID>, you can enter the id as a numeral (starting form 0).

[aarobc]

To extend on this, It would be nice to have events available for hovering on the closest axis, not just available for tooltips.

[AnushaputtaUI]

is there a tooltip on graph 2D now if not,Is there any solution?