d3.js tool tip with HTML link

This is designed to demonstrate generating tool tips with an HTML link in them. The graph is based on a simple line graph per the book D3 Tips and Tricks and was generated in response to a question on the d3noob.org blog.

The main differences with this example are the addition of the <a> tags in the appropriate places as commented, the removal of the pointer-events: none attribute in the `style section and the slight amending of the transitions of the html divs so that the tool tips stay in place while the mouse moves off the dot.

forked from d3noob's block: d3.js tool tip with HTML link

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

body { font: 12px Arial;}

path { 
	stroke: steelblue;
	stroke-width: 2;
	fill: none;
}

.axis path,
.axis line {
	fill: none;
	stroke: grey;
	stroke-width: 1;
	shape-rendering: crispEdges;
}

div.tooltip {
  position: absolute;	
  text-align: center;	
  width: 60px;	
  height: 28px;		
  padding: 2px;	
  font: 12px sans-serif;	
  background: lightsteelblue;	
  border: 0px;					
  border-radius: 8px;
 /*  pointer-events: none;	This line needs to be removed */
	
}

</style>
<body>

<script type=
    "text/javascript" src="https://d3js.org/d3.v3.min.js">
</script>

// Set the dimensions of the canvas / graph
var	margin = {top: 30, right: 20, bottom: 30, left: 50},
	width = 600 - margin.left - margin.right,
	height = 270 - margin.top - margin.bottom;

// Parse the date / time
var	parseDate = d3.time.format("%d-%b-%y").parse;
var formatTime = d3.time.format("%e %B");// Format tooltip date / time

// Set the ranges
var	x = d3.time.scale().range([0, width]);
var	y = d3.scale.linear().range([height, 0]);

// Define the axes
var	xAxis = d3.svg.axis().scale(x)
	.orient("bottom").ticks(5);

var	yAxis = d3.svg.axis().scale(y)
	.orient("left").ticks(5);

// Define the line
var	valueline = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.close); });

// Define 'div' for tooltips
var div = d3.select("body")
	.append("div")  // declare the tooltip div 
	.attr("class", "tooltip")              // apply the 'tooltip' class
	.style("opacity", 0);                  // set the opacity to nil

// Adds the svg canvas
var	svg = d3.select("body")
	.append("svg")
		.attr("width", width + margin.left + margin.right)
		.attr("height", height + margin.top + margin.bottom)
	.append("g")
		.attr("transform", 
		      "translate(" + margin.left + "," + margin.top + ")");

// Get the data
d3.csv("data.csv", function(error, data) {
	data.forEach(function(d) {
		d.date = parseDate(d.date);
		d.close = +d.close;
	});

// Scale the range of the data
	x.domain(d3.extent(data, function(d) { return d.date; }));
	y.domain([0, d3.max(data, function(d) { return d.close; })]);

// Add the valueline path.
	svg.append("path")		
		.attr("class", "line")
		.attr("d", valueline(data));

// draw the scatterplot
	svg.selectAll("dot")									
		.data(data)											
	.enter().append("circle")								
		.attr("r", 5)	
		.attr("cx", function(d) { return x(d.date); })		 
		.attr("cy", function(d) { return y(d.close); })
	// Tooltip stuff after this
	    .on("mouseover", function(d) {		
            div.transition()
				.duration(10000)	
				.style("opacity", 0);
			div.transition()
				.duration(200)	
				.style("opacity", .9);	
			div	.html(
				'<a href= "https://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");
			})
  		.on("mouseout", (d) => {
    		 div.transition()
				.duration(10000)	
				.style("opacity", 0);
  });
	mouseover(d){
    
  };
	// Add the X Axis
	svg.append("g")	
		.attr("class", "x axis")
		.attr("transform", "translate(0," + height + ")")
		.call(xAxis);

// Add the Y Axis
	svg.append("g")	
		.attr("class", "y axis")
		.call(yAxis);

});

</script>
</body>