1

そのため、含まれるテキストの幅に基づいてサイズが変更されるこのツールチップを追加しようとしています。ツールチップは 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 に答える