There was an interesting question on d3noob.org¹⁰³ about adding an HTML link to a tooltip.
While the person asking the question had the problem pretty much solved already, I thought it might be useful for others.
The premise is that you want to add a tool tip to your visualization using the method described here, but you also want to include an HTML link in the tooltip that will link somewhere else.
This might look a little like the following;
Tool tip with an HTML Link
In the image above the date has been turned into a link. In this case the link goes to google.com, but that can obviously be configurable.
The full code for this example can be found ongithub¹⁰⁴or in the code samples bundled with this book (tooltips-link.html and data.csv). A working example can be found onbl.ocks.org¹⁰⁵.
There are a few changes that we would want to make to our original tooltip code to implement this feature.
First of all, we’ll add the link to the date element. Adding an HTML link can be as simple as wrapping the ‘thing’ to be used as a link in<a>tags¹⁰⁶with an appropriate URL to go to.
The following adaptation of the code that prints the information into our tooltip code does just that;
¹⁰³http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html
¹⁰⁴https://gist.github.com/d3noob/c37cb8e630aaef7df30d
¹⁰⁵http://bl.ocks.org/d3noob/c37cb8e630aaef7df30d
¹⁰⁶http://www.w3schools.com/tags/tag_a.asp
div .html(
'<a href= "http://google.com">' + // The first <a> tag formatTime(d.date) +
"</a>" + // closing </a> tag
"<br/>" + d.close)
.style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px");
<a href= "http://google.com">places our first<a>tag and declares the URL and the second tag follows after the date.
The second change we will want to make is to ensure that the tooltip stays in place long enough for us to actually click on the link. The problem being solved here is that our original code relies on the mouse being over the dot on the graph to display the tooltip. if the tooltip is displayed and the cursor moves to press the link, it will move off the dot on the graph and the tooltip vanishes (Nice!).
To solve the problem we can leave the tooltip in place adjacent to a dot while the mouse roams freely over the graph until the next time it reaches a dot and then the previous tooltip vanishes and a new one appears. The best way to appreciate this difference is to check out the live example onbl.ocks.org¹⁰⁷.
The code is as follows (you may notice that this also includes the link as described above);
.on("mouseover", function(d) {
'<a href= "http://google.com">' + // The first <a> tag formatTime(d.date) +
We have removed the.on("mouseout"portion and moved the function that it used to carry out to the start of the.on("mouseover"portion. That way the first thing that occurs when the mouse cursor moves over a dot is that it removes the previous tooltip and then it places the new one.
The last change we need to make is to remove from the<style> section the line that told the mouse to ignore the tooltip;
¹⁰⁷http://bl.ocks.org/d3noob/c37cb8e630aaef7df30d
/* pointer-events: none; This line needs to be removed */
In this case I have just commented it out so that it’s a bit more obvious that it gets removed.
Moar Links!
One link is interesting, but let’s face it, we didn’t go to all the trouble of putting a link into a tool tip to just go to one location. Now we shift it up a gear and start linking to different places depending on our data. At the same time (and because someone asked) we will make the link open in a new tab!
The changes to the script are fairly minor, but one fairly large change is the need to have links to go to. For this example I have added a range of links to visit to our csv file so it now looks like this;
The code change is to the piece of JavaScript where we add the HTML. This is what we end up with;
div .html(
'<a href= "'+d.link+'" target="_blank">' + //with a link formatTime(d.date) +
"</a>" +
"<br/>" + d.close)
.style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px");
We’ve replaced the URLhttp://google.comwith the variable for ourlinkcolumnd.linkand we’ve also added in thetarget="_blank"statement so that our link opens in a new tab.
A quick word of warning on this piece of code. it can look a little messy because it includes nested speech-marks and quotation marks. This makes it a bit confusing if you’re unused to the idea of nesting this type of information. If things aren’t working in this part of your code, I recommend going back to basics and adding one piece at a time, getting it right and then add the next piece. Take it slow :-).
The full code for this multi link example can be found ongithub¹⁰⁸or in the code samples bundled with this book (tooltips-link-multi.html and datatips.csv). A working example can be found on bl.ocks.org¹⁰⁹.
Hopefully that helps people with a similar desire to include links in their tooltips. Many thanks to the reader who suggested it :-).
¹⁰⁸https://gist.github.com/d3noob/2e224baa7472c5e9e0e8
¹⁰⁹http://bl.ocks.org/d3noob/2e224baa7472c5e9e0e8