insert line break in tooltip text (tooltip is made using div element)

Curiouslearn

unread,

Feb 12, 2012, 11:30:54 PM2/12/12

to d3...@googlegroups.com

Today, I figured out how some basics of creating tooltips in d3.js
using two very good examples: one by Mike Bostock at
http://bl.ocks.org/1087001 and another by biovisualize at
https://gist.github.com/1016860.

Now I want to go a little further and figure how to insert a line
break in the text element in the tooltip. I would appreciate if
someone could help with that. I tried inserting "\n" in .text(), but
that does not help (please see the body of function mousemove()
below). The following is a working example.

Thanks in advance for your help.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://mbostock.github.com/d3/d3.js"></script>
<style type="text/css">
div.tooltip {
position: absolute;
text-align: center;
z-index: 10;
width: 100px;
height: 24px;
padding: 8px;
font: 24px sans-serif;
background: red;
color: white;
border: solid 1px #aaa;
border-radius: 8px;
opacity: 0;
}
</style>

</head>
<body>
<div id="viz"></div>

canvas.append("svg:rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 200)
.attr("height", 200)
.style("stroke", "gray")
.style("fill-opacity", 0.5)
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseout", mouseout);

tooltipdiv = d3.select("body")
.append("div")
.attr("class", "tooltip");

circle = d3.select("body")
.append("svg:svg")
.append("svg:circle")
.style("stroke", "red")
.style("fill", "blue")

function mouseover(){
tooltipdiv
.style("visibility", "visible")
.style("opacity", 1);
}

function mousemove(){
tooltipdiv
.style("visibility", "visible")
.style("opacity", 0.5)
.style("top", d3.event.pageY + "px")
.style("left", d3.event.pageX + "px")
.text(d3.event.pageX + "\n line"); /* \n does not work in
creating a line break*/
}

function mouseout(){
tooltipdiv.style("opacity", 0.5)
.style("visibility", "hidden");
}

</script>
</body>
</html>

florent andre

unread,

Feb 13, 2012, 3:52:17 AM2/13/12

to d3...@googlegroups.com

As this is a classical html div, br, p... Will do the trick.

Send from my mobile

wimdows

unread,

Feb 13, 2012, 4:03:45 AM2/13/12

to d3-js

Yes, I was just gonna say that. As in
.html(d3.event.pageX + "<br> line");
:)

curiouslearn

unread,

Feb 13, 2012, 6:40:06 AM2/13/12

to d3-js

Thanks! This worked great.

I had tried <br/> earlier, but it did not work with .text(). I had
also tried .innerHTML, which gave error.

Did not know you could use .html? Thanks, wimdows.

Scott Murray

unread,

Feb 13, 2012, 7:11:03 PM2/13/12

to d3...@googlegroups.com

You might have to escape the slash / character. Just a guess, but you could try preceding it with a backslash:

.html(d3.event.pageX + "<br\/> line");

Curiouslearn

unread,

Feb 13, 2012, 10:01:12 PM2/13/12

to d3...@googlegroups.com

Hi Scott,

There is no need to escape the slash character. It works with that.

Chenyang Zhao

unread,

Dec 28, 2013, 2:52:04 PM12/28/13

to d3...@googlegroups.com

Hi curioslearn

I've tried using <br> and <br/> in the selection.text() but had no luck. I used it like this,

d3.select("body").append("div").attr("class", "tooltip")

.append("p")

.text("State: " + variable1 + " <br/> " +

"County: " + variable2)

instead of giving me a line break in the text, it prints "<br/>" with other text. It's weird, I've tried it on different browsers just doesn't work. Any suggestions? Thanks!

Chris Viau

unread,

Dec 28, 2013, 3:15:55 PM12/28/13

to d3...@googlegroups.com

Use .html()

Chris

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

Reply all

Reply to author

Forward