次のエントリ: 外部プログラムの標準出力を取得する [c]
簡単なツールチップ作成までの道のり
2007-03-05-2 / カテゴリ: [programming][html][JavaScript] / [permlink]
ちょっと使いたくなっていろいろ探してみた。
…が、でて来るのは汎用的で高機能なものが沢山で、コード例や作成のTipsみたいなのはさっぱり。(使用に関してはライセンス上は特に問題ないみたいだけど)
つーわけで作ってみた。
やりたい事は、フォームの入力において、フォーカスしている項目の説明みたいな感じ。んで、できればブラウザごとの処理振分はやりたくない(わがまま)
※ 動作確認は IE6.0(winXP) / Firefox 2.0.0.2(winXP) のみ
その1
参考：タイトル・ツールチップを変える
もっとも簡単にできる。
多分、ブラウザの表示機能を使って表示している。
難点なのが、マウスフォーカスから表示までのタイムラグがあること。
できれば、ツールチップ表示の汎用ライブラリのように、フォーカスの瞬間に即時表示して欲しい。
その2
というわけで、上記のサイトからリンクされてるoverLIBからライブラリをダウンロードしてみた…ファイル多いよ。ここまで大掛かりの仕込みをする予定ではないので…。JavaScriptを大して使いこなしてもいないので、参考にすることもできない…(エントリポイントすらわからんorz)
つーわけで、スクラッチから作成するハメに。
フォーカスと同時に即時表示するためには、どうもレイヤーあたりを使用して表示する必要があるみたい。
んで
うさのJavaScript講座・サンプル集８のサンプル３４「レイヤーの表示と非表示・レイヤー名指定編」を参考に、マウスフォーカス時にテキストを表示する。
onmouseover で<div>タグの文字列を visible に、onmouseout で hidden とする。
<div>の文字列は、通常時に表示されないように、visibility:hidden の style で非表示のスタイルにする。
ただしこの作りだと、呼び出し元(inputタグ)から文字列を指定できないので、呼び出し元が複数でそれぞれ別の文字列を表示したい場合に対処できない。
こーゆーときは、関数呼び出しに引数を使用し、関数内で innerHTML で表示文字列を変更する。HTML での<div>タグの文字列は何も入れなくて良い。
スクリプト部
サンプル2
んで。
ツールチップの表示ってことで、メジャーな仕様の「マウスカーソルの位置に表示」を行う。
と思ったが、「マウスカーソルの座標の取得」が、どーやらブラウザ依存っぽい。
第五章 クライアント再度の技術：マウスの座標を取得する
マウスカーソルについてくるイメージ/イヌでもわかるJavaScript講座
ので、仕様を変更して、「カーソル位置でなくフォーカスした部品の右側」にツールチップを表示するようにした。
呼び出し元(<input>タグ)の情報を渡すために、引数に this を追加して、呼び出される関数(showMessage)では、そこから呼び出し元の位置を取得して、ターゲット(<div>タグ)の位置を計算・表示するって寸法。
表示位置を自由に決定するために、position:absolute を使用する。スタイルが多くなってきたので、<head>内にまとめた。
スクリプト・CSS部
innerHTML で <div>〜</div>の表示文字をセットするだけなので、<br>で改行や<img>で画像表示とかもOK。
もちろん、呼び出し元は<input>である必要もなし。
メッセージの表示位置は固定でよくて、動的な表示位置制御が不要なら、引数 this 渡しや、position:absolute は不要で、2番目のサンプルの状態で OK かな。
…が、でて来るのは汎用的で高機能なものが沢山で、コード例や作成のTipsみたいなのはさっぱり。(使用に関してはライセンス上は特に問題ないみたいだけど)
つーわけで作ってみた。
やりたい事は、フォームの入力において、フォーカスしている項目の説明みたいな感じ。んで、できればブラウザごとの処理振分はやりたくない(わがまま)
※ 動作確認は IE6.0(winXP) / Firefox 2.0.0.2(winXP) のみ
その1
参考：タイトル・ツールチップを変える
もっとも簡単にできる。
多分、ブラウザの表示機能を使って表示している。
難点なのが、マウスフォーカスから表示までのタイムラグがあること。
できれば、ツールチップ表示の汎用ライブラリのように、フォーカスの瞬間に即時表示して欲しい。
その2
というわけで、上記のサイトからリンクされてるoverLIBからライブラリをダウンロードしてみた…ファイル多いよ。ここまで大掛かりの仕込みをする予定ではないので…。JavaScriptを大して使いこなしてもいないので、参考にすることもできない…(エントリポイントすらわからんorz)
つーわけで、スクラッチから作成するハメに。
フォーカスと同時に即時表示するためには、どうもレイヤーあたりを使用して表示する必要があるみたい。
んで
うさのJavaScript講座・サンプル集８のサンプル３４「レイヤーの表示と非表示・レイヤー名指定編」を参考に、マウスフォーカス時にテキストを表示する。
onmouseover で<div>タグの文字列を visible に、onmouseout で hidden とする。
<div>の文字列は、通常時に表示されないように、visibility:hidden の style で非表示のスタイルにする。
<html>
<head>
<script language="JavaScript">
<!--
function showMessage() {
document.getElementById("target").style.visibility="visible";
}
function clearMessage() {
document.getElementById("target").style.visibility="hidden";
}
//-->
</script>
</head>
<body>
<form>
<input type="text" name="inputvalue" onmouseover="showMessage()" onmouseout="clearMessage()">
</form>
<div id="target" style="visibility:hidden;">test string</div>
</body>
</html>
サンプル1ただしこの作りだと、呼び出し元(inputタグ)から文字列を指定できないので、呼び出し元が複数でそれぞれ別の文字列を表示したい場合に対処できない。
こーゆーときは、関数呼び出しに引数を使用し、関数内で innerHTML で表示文字列を変更する。HTML での<div>タグの文字列は何も入れなくて良い。
スクリプト部
<script language="JavaScript">
<!--
function showMessage(msg) {
document.getElementById("target").style.visibility = "visible";
document.getElementById("target").innerHTML = msg;
}
function clearMessage() {
document.getElementById("target").style.visibility = "hidden";
}
//-->
</script>
HTML部
<form>
<input type="text" name="inputvalue1" onmouseover="showMessage('テキストの入力1')" onmouseout="clearMessage()">
<input type="text" name="inputvalue2" onmouseover="showMessage('テキストの入力2')" onmouseout="clearMessage()">
</form>
<div id="target" style="visibility:hidden;"></div>
これで一応、フォーカスした部品毎に表示する文字列を指定できるようになった。サンプル2
んで。
ツールチップの表示ってことで、メジャーな仕様の「マウスカーソルの位置に表示」を行う。
と思ったが、「マウスカーソルの座標の取得」が、どーやらブラウザ依存っぽい。
第五章 クライアント再度の技術：マウスの座標を取得する
マウスカーソルについてくるイメージ/イヌでもわかるJavaScript講座
ので、仕様を変更して、「カーソル位置でなくフォーカスした部品の右側」にツールチップを表示するようにした。
呼び出し元(<input>タグ)の情報を渡すために、引数に this を追加して、呼び出される関数(showMessage)では、そこから呼び出し元の位置を取得して、ターゲット(<div>タグ)の位置を計算・表示するって寸法。
表示位置を自由に決定するために、position:absolute を使用する。スタイルが多くなってきたので、<head>内にまとめた。
スクリプト・CSS部
<script language="JavaScript">
<!--
function showMessage(obj, msg) {
var objTooltip = document.getElementById("target");
objTooltip.style.visibility = "visible";
objTooltip.style.left = obj.offsetWidth + obj.offsetLeft;
objTooltip.style.top = obj.offsetTop;
objTooltip.innerHTML = msg;
}
function clearMessage() {
document.getElementById("target").style.visibility = "hidden";
}
//-->
</script>
<style type="text/css">
.tooltip {
visibility: hidden;
position: absolute;
left: 170px;
top: 1px;
padding: 3px;
background-color: #ffdddd;
}
</style>
HTML部<form> <input type="text" name="inputvalue" onmouseover="showMessage(this, 'テキストの入力1<br><span style=color:red>数字</span>')" onmouseout="clearMessage()"> <input type="text" name="inputvalue" onmouseover="showMessage(this, 'テキストの入力2<br><img src=2007-02-27-1.png>')" onmouseout="clearMessage()"> </form> <div id="target" class="tooltip"></div>サンプル3
innerHTML で <div>〜</div>の表示文字をセットするだけなので、<br>で改行や<img>で画像表示とかもOK。
もちろん、呼び出し元は<input>である必要もなし。
メッセージの表示位置は固定でよくて、動的な表示位置制御が不要なら、引数 this 渡しや、position:absolute は不要で、2番目のサンプルの状態で OK かな。
[
コメント ]
次のエントリ: 外部プログラムの標準出力を取得する [c]
2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
最終更新時間: 2013-05-02 16:12
