1

所以我试图添加这个工具提示,它会根据它包含的文本的宽度调整大小。Tooltip 是一个 div,它有另一个包含文本的 div。

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

我使用 javascript 作为 mytooltiptext.innerHTML=sometext 为其分配文本。工具提示在显示设置为无时隐藏,并在鼠标悬停时变为可见。我正在尝试根据包含 div 的文本/文本的宽度在它变得可见之前设置它的宽度。但是当我尝试获取包含 div 的文本的 clientWidth 或 scrollWidth 时,它显示为零。我的理解是,由于元素被隐藏,它正在发生。我尝试将其显示设置为阻止并将可见性设置为隐藏,然后尝试获取必要的值,但无济于事。有没有办法在不先使其可见的情况下获得隐藏文本的宽度?

4

2 回答 2

1

不要隐藏它,将其移出屏幕,然后将其重新悬停。

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>​

演示:http: //jsfiddle.net/calder12/PBsJA/3/

于 2012-12-13T03:27:08.047 回答
0

你可以把它画到屏幕外。就像是:

.myCssStyle{
  position: absolute;
  right: 5000px;
} 
于 2012-12-13T03:23:54.927 回答