Accepted answer

You can append a <div> with position: absolute to body and position it on mousemove event. Change the opacity to update its display or hidden.

var div ='body').append('div')   
    .attr('class', 'tooltip')               
    .style('opacity', 0);

.on('mouseover', function(d) {      
        .style('opacity', .9);      
    div.html('<h3>' + d.status + '</h3>' + '<p>' + timeFormat(new Date( + ' at ' + monthDayFormat(new Date( + '</p>')  
        .style('left', (d3.event.pageX) + 'px')     
        .style('top', (d3.event.pageY - 28) + 'px');    


<text> nodes cannot be children of <rect>s, only just as <line>s or <circle>s can't. They are figure nodes and are not meant to have children. Append the tooltip to the SVG or a <g> instead.

This means that you cannot access d.value through the function (d,i) {return d.value}) anymore, but you can get it because you have access to d from .on('mouseover', function(d,i) {, just remove everything but d.value.

If you use x and y from the <rect>, what is going to happen is that the <text> element covers the <rect>, catches the mouse event and triggers a mouseout immediately on the <rect>. Since you'll probably want to remove the tooltip on mouseout, you'll get the text node flickering on and off. Either move the text to the right by at least rectWidth or use d3.event to get the mouse coordinates of the event and position it a little down and to the right, using something like .attr('x', d3.event.clientX + 10) to move it right.

Related Query