css,javascript,actionscriptを中心に勉強したことをまとめるブログ

フォームって例文のせたり、注意書きしたりして見づらくなることが多々あるので、フォーム用のツールチップを作ってみました。

デモ

javascriptサンプル / ツールチップ

ソース

ソースファイル（tooltip.js）

設置方法

■javascript

javascriptファイルを読み込みます。
読み込むパスはそれぞれ設定してください。

<script type="text/javascript" src="/path/js/tooltip.js"></script>

通常これだけでも問題ありません。
細かい設定をしたい場合は、jsファイル上部の以下の部分を変更してください。

/* --------------------------------
    Config : Config
 -------------------------------- */

var Tooltip_config = {
    // animation config
    animation: {
        minute: 60, // ループする秒数
        per: 0.07, // 変化量
        opacity: 0.7 //透明度
    },

    // tooltip config
    tooltip: {
        defclass: 'tool', // tooltipの対象となるclass名
        styleclass: 'tool-style', // tooltip用のCSSクラス
        form_name: 'mainform' // 対象となるフォーム名
    }
};

各ページ内に記述しても問題ありません。
その場合、設定したい値のみ記述すればOKです。

<script type="text/javascript">

var Tooltip_config = {

    // tooltip config
    tooltip: {
        form_name: 'mainform' // 対象となるフォーム名
    }
};

</script>

■HTML

まず、使用したいフォームのformタグにidをつけます。

<form action="hoge" id="mainform">

デフォルトでは、”mainform”となっていますが、設定を変えることができます。

次に、ツールチップを設定したいinputに”tool”というclass名をつけます。
また、それに対応するlabel要素にも同じく”tool”というclass名をつけます。

<label class="tool">例 ： 株式会社ワンダー</label>
<input type="text" name="company" size="50" class="tool" />

【※注意】
tooltip.jsはinputの数とlabelの数をそれぞれ配列にしています。
片方だけつけたり、表示させたいlabel部分の順番を変更したりするとうまくいかない場合があります。
また、ツールチップ用の文言は必ずlabelタグ内に書いて下さい。

■css

ツールチップ用のcssは以下のように”tool-style”というclass書いて下さい。
ページ内に記述しても、外部ファイルに記述しても問題ありません。
label要素内であればどんなタグでも記述できますので、それに応じて好きなスタイルを当ててください。
※position部分は変更しないようにしてください。

label.tool-style {
    /* base */
    font-size:80%;
    color:#ffffff;
    line-height:1.7;
    padding:5px 7px;
    background-color:#000000;
    white-space:nowrap;

    /* position */
    position:absolute;
    display:none;

    /* modern property*/
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

これは、javascriptを無効にした場合と有効の場合とスタイルを当てられるようにしているためで、
無効の場合は”tool”というclass名で、有効の場合は”tool-style”というclass名になるようにしています。
よって無効の場合のスタイルも設定したい場合は”tool”というclassにスタイルを当てて下さい。

※12/09追記
IE6において、absoluteで親要素の幅を引き継いでしまう（？）バグが発生しました。
親要素の幅よりも大きい数字をleftに指定すると幅が極端にせまくなってしまいます。
対処法として、「white-space:nowrap」を追加しました。

まとめ

久しぶりにjavascriptを書いてなかなか大変でした。
tooltip.jsに関してはあまり適用範囲を広げないようにしたので汎用性という意味ではあまり良くないと思います。
表示の位置（offsetTopとか、offsetHeightとか）もブラウザ毎に微妙に違います。
雑ですね。
万が一使う方がいるのでしたら、注意して下さい。

それから、今回作ったjsの中でアニメーション用のクラスを作りました。
これを作っておくと今度いろいろできそうだと思って作りました。
もうちょっと詰めてイージングとかもできるようになったらいいなと思います。

Enjoy javascript life!!

参考サイト

JS　入力項目の説明をtooltipで表示する - Development Reference

これを見て感化されたのでした！