score:2

it might be more straightforward to append the tooltips using divs rather than svg rects - for instance, if you added:

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

into your code, then you could make it appear and disappear plus add multi-line text using:

.on("mouseover", function(d){
        var xpos = d3.mouse(this)[0];
        var ypos = d3.mouse(this)[1];
        tooltip.style("left", xpos + "px")
                .style("top", ypos + "px")
            .html("<p class='tooltip'>" + d.category + "<br><br>line 2<br><br>etc</p>")
            .transition().delay(200).style("opacity", 0.9);
    })
    .on("mouseout", function(){
       tooltip.transition().delay(0).style("opacity", 0);
    })

you can add the same styling you had before using css properties, as below:

div.tooltip {
    width: 200px;
    height: 125px;
    background-color: white;
    border: 1px solid #969696;
    position: absolute;
}

p.tooltip {
    font-size: 18;
    font-weight: 1em;
    padding-left: 10px;
}

i've mocked this up in a jsfiddle here - it might have some of your code missing, apologies if so - but it should give a good idea how to merge it in if you want to use the code. let me know if you have any questions! you should be able to get some more information from here if you need it too.


Related Query