Add an example of using popper.js to show a tooltip #894
Conversation
There was a problem hiding this comment.
Code looks good except for the text, where I have some changes suggested for the wording. I played a bit with the actual examples: they work well, but it seems like the tooltip stays in place even after the user hovers away from the graph. Is there a way around that?
examples/charts/experimental.htm
Outdated
| data = MG.convert.date(data, 'date'); | ||
| MG.data_graphic({ | ||
| title: "Tooltip on line chart", | ||
| description: "This is an example to use popper.js to show a tooltip on line chart.", |
There was a problem hiding this comment.
Change this (here and below, too bad we duplicate the code in two places for these examples) to:
Using popper.js and the mouseover callback, you can easily create a tooltip when the user hovers over a particular datapoint.
examples/charts/experimental.htm
Outdated
| d3.json('data/points1.json', function(data) { | ||
| MG.data_graphic({ | ||
| title: "Tooltip on point chart", | ||
| description: "This is an example to use popper.js to show a tooltip on point chart.", |
There was a problem hiding this comment.
Change text to: This technique also works for point charts
examples/charts/experimental.htm
Outdated
| tooltipEl.innerText = `date: ${d3.timeFormat('%b %e, %Y')(d.date)}\nvalue: ${d.value}`; | ||
| tooltip.reference = d3.select(`#tooltip-line-chart .mg-line-rollover-circle`).node(); | ||
| tooltip.update(); | ||
| } |
There was a problem hiding this comment.
Can we use the mouseout callback to make the tooltip disappear when the user hovers away from the graph?
|
@wlach Ok, I've submitted the changes. I found that if just hide tooltip on mouse out of point, the tooltip will flash. So I also bind an event on the tooltip element to avoid this. |
No description provided.