Breaking line in Bootstrap tooltip inside D3 svg

Question

Pertinent block of code.

        nodeEnter.append("text")
        .attr("x", function (d) { return d.children || d._children ? -10 : 10; })
        .attr("dy", ".35em")
        .attr("text-anchor", function (d) { return d.children || d._children ? "end" : "start"; })
        .text(function (d) { return d.ured; })
        .style("fill-opacity", 1e-6)
        .attr("title", function (d) { return "user: " + d.ured +'BREAK LINE HERE'+ "name: " + d.name; });

The BS tooltip is there but I need to break a line between variables.

I've tried things in the line of

.append("title")
            .text(function (d) { return "user: " + d.ured + "\nname: asd"; });

and they do show in different lines but it's not a bootstrap tooltip. I've also played with tspans according to this but wasn't able to make it work in the tooltip.

Any ideas? Thanks.

score 1 · Accepted Answer · answered Aug 14 '17 at 18:34

In case in the future any of you struggle with this, I selected every node then hardcoded <br /> in the desired placed. Finally set the data-html attribute to true.

In the example code down below I returned the string brutely but you could of course wrap it up in a nice-designed function.

svg.selectAll("g.node").each(function () {
var node = d3.select(this);    
var tooltipText = function (d) {
    return "User: " + d.user + "<br />Nombre: " + d.name;
};                            
if (tooltipText) {
    node.select("text")
      .attr("data-html", "true")
      .attr("title", tooltipText);
}
});

Props to the answer to this question.

Breaking line in Bootstrap tooltip inside D3 svg

1 Answers1