3

ページには約 1000 個のテキストフィールドがあり、ユーザーが現在入力しているテキストフィールドの上にツールチップを表示する必要があります。

簡単に聞こえますが、ドキュメントの流れを壊さずに、ページ上の他のすべてのものの上に表示する方法を理解するのに苦労しています。

これには外部ライブラリも使用できないため、少し難しくなります。純粋な JS (または、TypeScript などの純粋な JS にコンパイルされる言語) のみを使用することが許可されています。

リンク、チュートリアル、またはそのようなものはありますか? とても役に立ちます。

ありがとうございました

編集: 要素で Title 属性を使用できることは承知していますが、このツールチップにはテキストだけではなく、テキスト ボックスのすぐ上に大きくする必要があります。

4

2 に答える 2

3

このようなものがあなたを助けるかもしれません:

http://jsfiddle.net/ysuw5/

<div id="container">
    <input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf" /><br />
    <input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf2" /><br />
    <input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf3" /><br />
    <input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf4" /><br />

    <div id="tooltip"></div>
</div>

function theFocus(obj) {
    var tooltip = document.getElementById("tooltip");
    tooltip.innerHTML = obj.title;
    tooltip.style.display = "block";
    tooltip.style.top = obj.offsetTop - tooltip.offsetHeight + "px";
    tooltip.style.left = obj.offsetLeft + "px";
}

function theBlur(obj) {
    var tooltip = document.getElementById("tooltip");
    tooltip.style.display = "none";
    tooltip.style.top = "-9999px";
    tooltip.style.left = "-9999px";
}

これは明らかに非常に偏狭であり、必要なものに正確に適合するように変更する必要があります. focusイベントとイベントを Javascriptにバインドすることは気にしませんでしたblur。それらを HTML に入れるよりはましです。

于 2012-10-29T07:01:23.087 に答える
1

「CSS ツールチップ」はいろいろな使い方ができます。比較的単純なアイデアはdiv、最初は CSS で隠されているヒント コンテンツをフィールドの直前に配置することです。次に、onfocusそれを表示に変更するイベント ハンドラーdiv(およびonblur再び非表示にするハンドラー) が必要です。ヒントとフィールドのコンテナーを用意し、そのコンテナーを相対位置として宣言して、ヒントを「絶対に」(コンテナーに対して相対的に) 配置できるようにします。

例 ( jsfiddle ):

<!DOCTYPE HTML>
<meta charset=utf-8>
<style>
.textfield {
  position: relative;
}
.textfield .hint {
  display: none;
  position: absolute;
  width: 10em;
  bottom: 1.3em;
  background: #ff9;
  padding: 0 0.2em;
  border: solid 1px;
}
</style>
<script>
function hint(elem) {
  elem.parentNode.firstElementChild.style.display = 'block';
}
function unhint(elem) {
  elem.parentNode.firstElementChild.style.display = 'none';
}
</script>
<p>This is just some filler text.
<table>
<tr>
  <td><label for=bar>Bar</label>
  <td>
  <div class=textfield>
  <div class=hint>This is hint text for the Bar field.</div>
  <input id=bar name=bar onfocus="hint(this)" onblur="unhint(this)">
  </div>
<tr>
  <td><label for=foo>Foo</label>
  <td>
  <div class=textfield>
  <div class=hint>This is hint text for the Bar field.</div>
  <input id=foo name=foo onfocus="hint(this)" onblur="unhint(this)">
  </div>
</table>

(テーブルを使用してフォームを構造化する場合、このアプローチでは CSS ポジショニングがテーブル セルに対して機能しないことを覚えておく必要があります。これが、td要素をラッパーとして使用できず、そのdiv内部で使用する必要がある理由です。)

于 2012-10-29T07:28:27.033 に答える