observablehq
Allow the tip title channel to contain rich text or markup
Hi, I would like for example to have in bold the first line of tooltip (it’s a title) and to add a hyperlink at the end of the tooltip text.
I think it would be very helpful and informative.
Thank you
It would be very cool if one could use a feature like the one suggested here to put a plot inside of a tooltip – eg. imagine a scatterplot where each dot represents a group of datapoints, and hovering on a datapoint can show you more details about the points inside that particular group (eg. the distributions of some other variables).
Saw this interesting use of tippy to generate html tooltips for Plot.
https://observablehq.com/d/baeb8cbead1ed3d2
Just to add a bit to this (I was encouraged to post here by @Fil): it would be very nice to be able to have "aggregated" tips, where pointerX somehow allows us to report all values on the chart at the X position the mouse cursor exists at. Like this:
Happy to try to work on this together if people are interested in this.
Here’s an example of grouped tips: not as complete as what you're suggesting, but I'm using Plot to generate it so it's easy to expand with marks and transforms. https://observablehq.com/@recifs/plot-grouped-tips
Upvoting as I also have a use case for rich text, etc tool tips. In particular, I want to be able to embed images or custom marks in the tooltip. Thanks!
@joe-bruce Can you please also upvote by adding a 👍 reaction to the top post? That way we can track the number of upvotes by sorting issues. Thank you.
@aborruso - this may help you also: https://observablehq.com/@mtsvelik/clickable-hyperlinks-in-plot-tip
Something relatively “easy” we could do: a custom format function for a channel value could return an SVG TSPAN or A element, allowing the text to be styled and hyperlinked. Essentially we’d change this line here to append the returned value directly rather always wrapping it in a text node:
https://github.com/observablehq/plot/blob/f55155b779840df961e2ff1f1f12afb7b41081d4/src/marks/tip.js#L197C18-L197C68
Hi @mbostock, does the great latest release - "The new format tip mark option enables greater control over order and formatting of channels." - help me to reach my goal or part of it?
I think yes, but before getting emotional, I wanted to be certain.
Then I'll have to figure out how to use it, because I'm too bad at it. But at least I'm poor, but happy.
What do you think: should I close this issue?
No @aborruso, the new custom format is still limited to plain text formatting, not rich text. Sorry! That is why we have this separate issue.
Another direction to explore here could be a content channel that returns arbitrary SVG content. This would take priority over the default display (similar to the title channel taking priority over the default display of all channels), and allow rendering arbitrary content albeit using a lower-level API — for example, you could generate SVG foreignObject elements using htl.svg.
If the href channel exists, the tip should open the page (maybe with a second click on a link icon?)