D3 Tips and Tricks: Interactive Data Visualization/

...

/

Including an HTML Link in a Tooltip

Including an HTML Link in a Tooltip

Learn how you can improve your tooltips by having them display HTML links instead of static text.

We'll cover the following...

Adding the link

The premise is that we want to add a tooltip to our visualization using the method described here, but we also want to include an HTML link in the tooltip that will link somewhere else. This might look a little like the following:

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.

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:

Press + to interact
       div .html(
         '<a href= "http://google.com">' + // The first <a> tag
         formatTime(d.date) +
         "</a>" +                          // closing </a> tag
         "<br/>"  + d.close)
         .style("left", (event.pageX) + "px")
         .style("top", (event.pageY - 28) + "px");

<a href= "http://google.com"> ...