# Plot Tooltip with clickable URL and/or images?

**URL:** <https://talk.observablehq.com/t/plot-tooltip-with-clickable-url-and-or-images/7082>\
**Category:** Help\
**Created:** [September 29, 2022, 11:58pm UTC](https://talk.observablehq.com/t/plot-tooltip-with-clickable-url-and-or-images/7082 "2022-09-29T23:58:50Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![melaniewalsh](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/melaniewalsh/32/3842_2.png) [@melaniewalsh](https://talk.observablehq.com/u/melaniewalsh)\
**Post date:** [September 29, 2022, 11:58pm UTC](https://talk.observablehq.com/t/plot-tooltip-with-clickable-url-and-or-images/7082/1 "2022-09-29T23:58:50Z")

</div>

Hi all,

I love @mkfreeman’s new [Plot Tooltip](https://observablehq.com/@mkfreeman/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](https://observablehq.com/@mellymeldubs/is-the-mountain-out)

Thanks!

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [September 30, 2022, 4:14pm UTC](https://talk.observablehq.com/t/plot-tooltip-with-clickable-url-and-or-images/7082/2 "2022-09-30T16:14:03Z")

</div>

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](https://atomiks.github.io/tippyjs/) well before `addTooltips` was written. Here’s how to accomplish your objective using TippyJS:

> **[Is the Mountain Out?](https://observablehq.com/d/629ad57ff6716d02)**
>
> Reworked with TippyJS Previous version Visualizing one of my favorite Twitter accounts: https://twitter.com/IsMtRainierOut

---

<div class="post-metadata">

**Author:** ![mkfreeman](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mkfreeman/32/2988_2.png) [@mkfreeman](https://talk.observablehq.com/u/mkfreeman)\
**Post date:** [October 4, 2022, 6:58pm UTC](https://talk.observablehq.com/t/plot-tooltip-with-clickable-url-and-or-images/7082/3 "2022-10-04T18:58:29Z")

</div>

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](https://observablehq.com/@observablehq/plot-image), 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](https://observablehq.com/d/a73e64bef615b92a) notebook, and a [fork](https://observablehq.com/d/ed66568e23da98b9) of your notebook using it.

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

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [January 29, 2024, 12:43pm UTC](https://talk.observablehq.com/t/plot-tooltip-with-clickable-url-and-or-images/7082/4 "2024-01-29T12:43:32Z")

</div>

A post was split to a new topic: [Add hypertext links with plot.tree without using a JSON file](https://talk.observablehq.com/t/add-hypertext-links-with-plot-tree-without-using-a-json-file/8731)
