To change the background color of the tooltip, you need to change the background property of the tooltip depending on the datum: .on("mouseover", function(e,d,i) { d3.select(this).attr("fill", "grey") let tooltipWidth = tooltip.node().offsetWidth; let tooltipHeight = tooltip.node().offsetHeight; tooltip .style('background', x => { while (d.depth > 1) d = d.parent; return color(d.data[0]);}) // <-- This is the new code!!! .style("left", e.pageX - tooltipWidth/2 +'px') .style("top", e.pageY-tooltipHeight - 10+'px') .style('visibility', 'visible')

To have the zoomable effect, you need to do two more things. First, you need to store to a variable 'rect' (for instance) the rectangle selection. This will allow you to easily change the height when zooming. Second, you need to add the code: rect.transition(t).attr("height", d => rectHeight(d.target)); at the end of the clicked function, to update the rect height (to fit to the whole svg).

To go vertical, you need to use the x for the width and the y for the height. Similar to what we did with the Tidy Tree example.