Plot Tooltip with clickable URL and/or images?

Community Help
1

Hi all,

I love @mkfreeman’s new Plot Tooltip, but I was wondering if anybody had suggestions for how to include a clickable URL and/or an image within this kind of tooltip. I tried to add HTML tags in the tooltip in this notebook, but it isn’t working for me: Is the Mountain Out? / Melanie Walsh / Observable

Thanks!

1 Like
2

There are a couple of issues that need to be dealt with to make this work:

  • Interpreting your HTML input as HTML, as opposed to plain text and
  • The addition of some code so that you can actually move your mouse into the tooltip.

I’ve never used Mike’s addTooltips function but, experimenting a little bit and looking at the code, I don’t see anything that deals with either of those issues.

I guess I haven’t used addTooltips because I was using a library called TippyJS well before addTooltips was written. Here’s how to accomplish your objective using TippyJS:

1 Like
3

Hey Melanie! Thanks for reaching out, and I love the question Is the Mountain Out. A tricky issue with the clickable link in a tooltip is, how do you click it? Because it moves on hover, that’s a bit tricky…

You could add an image using a Plot Image mark, though may require extra steps if the images are coming from twitter (at a glance, it wasn’t super simple given that twitter is putting the elements into a div asynchronously).

For adding links, I very quickly prototyped an addLinks utility, but it requires that the title text is the text for your hyperlink (something I’m sure could be adjusted). Here’s the addLinks notebook, and a fork of your notebook using it.

Hopefully that helps you get started, let me know if you have any followup questions!

4

A post was split to a new topic: Add hypertext links with plot.tree without using a JSON file