Plot: Tooltips available?

Community Help
1

It’s been a while since I tried… I poked around at docs and didn’t see it…

Is there any way to generate “tooltips” when using Plot? What i mean is being able to hover over a point and see a “popup” with additional information.

2

FWIW, I’m trying to do something simple like this:

    Plot.line(output, {
      x: "timestamp", y: "psi",
      curve: "catmull-rom",
      stroke: "blue",
      marker: "circle",
      title: d => `${d.psi} psi`
    }),
3

Hi!
** Edited this solution based on the reply below from @mbostock **

  • Tooltips should work just like you have, but they’ll appear as the browser-native tooltip (as opposed to a stylized version). Mike lists a few pluses and minuses about browser-native tooltips that you should note if you use them in your notebooks.
  • Alternatively, @mkfreeman has created a nice little import that you import into your notebook and go from there with the same syntax.

Hope that helps!

1 Like
4

Thank you!

5

The example you gave should work almost exactly as you’ve written it. However, there are a few things to be aware of with the browser-native tooltips used by the title channel:

  • The tooltip only appears exactly over the rendered mark. There’s no “bubble cursor” (or Voronoi) effect to have the tooltip show up near the mark. As such you may want to add some transparent marks with a thick stroke to add a buffer area to show the tooltip.
  • The tooltip only appears after a delay. If you move the mouse too quickly, the tooltip will not appear. This is to prevent tooltips from being jumpy and distracting. (This behavior is solely at the discretion of the browser vendors and cannot be changed.)
  • The tooltips won’t appear on mobile devices. (This behavior is solely at the discretion of the browser vendors and cannot be changed.)

On the plus side, browser native tooltips have some nice attributes that cannot be achieved with custom tooltips: they can appear over any other content in the browser (they are not limited to the sandboxed iframe in which your notebook code runs); they can appear outside the browser window entirely; and they disappear automatically whenever you click or move the mouse.

Here’s a screenshot and example:

Screen Shot 2022-05-20 at 7.46.48 AM
Screen Shot 2022-05-20 at 7.46.48 AM1296×808 54 KB 

Plot.plot({
  marks: [
    Plot.lineY(aapl, {x: "Date", y: "Close"}),
    Plot.lineY(aapl, {x: "Date", y: "Close", stroke: "transparent", strokeWidth: 20, title: d => `${d.Close}\n${d.Date.toLocaleDateString("en", {timeZone: "UTC"})}`}),
  ]
})
1 Like
6

Interesting! I’m sure I was moving to quickly, then. I did just bring in @mkfreeman’s tooltips, which act more like I wa expecting and more like what I was getting in Vega-Lite.

I appreciate the buffer idea, too… thanks!