如何找到网页上隐藏文字的宽度？

Question

So I am trying to add this tooltip, which gets resized based on the width of the text it contains. Tooltip is a div and it has another div containing the text.

<div><div> tooltip text </div></div>

I assign text to it using javascript as mytooltiptext.innerHTML=sometext. The tooltip is hidden with display set to none, and becomes visible on mouse hover. I am trying to set its width before it even becomes visible based on the width of the text/text containing div. But when I try to get the clientWidth or scrollWidth of the text containing div, it comes out as zero. My understanding is that it is happening due to the element being hidden. I tried setting its display to block and visibility to hidden and then tried to get the requisite values, but to no avail. Is there a way to get the width of hidden text without making it visible first?

Answer 1

Don't hide it, move it off screen then bring it back on hover.

CSS:

.inputtext span {
margin-left: -999em;
position: absolute;
}

.inputtext:hover span {
position: absolute;
left: 1em;
top: 2em;
z-index: 99;
margin-left: 0;
}​

HTML:

<div class="inputtext">Hover Me<span id="hiddenText">
This is the hidden text and some more text</span></div>​

Demo: http://jsfiddle.net/calder12/PBsJA/3/

Answer 2

You could draw it way offscreen. something like:

.myCssStyle{
  position: absolute;
  right: 5000px;
}