TipTipは、ToolTipを表示させる為のjQueryプラグインです。
デザインがすべてCSSで指定してあるところが気に入ったので紹介します。
実装
TipTip jQuery Plugin から、ソースコードをゲットします。
（jQuery本体をまだゲットしていないようなら、こちらからゲットしておきましょう→jQuery）
ヘッダーに、jQuery本体と、ダウンロードしたTipTipの、jsとCSSを読み込みます。
<link rel="stylesheet" href="tipTip.css" /> <script src="jquery-1.6.2.min.js"></script> <script src="jquery.tipTip.js"></script> <script src="jquery.tipTip.minified.js"></script>
実装したい要素に適当なクラスを付け、ポップアップさせたいテキストを、title 属性の値として入力します。
<img src="image.png" class="someClass" title="welcome to hijiriworld!!" />
オプション項目があれば指定します。
$(function() {
$(".someClass").tipTip({defaultPosition: "bottom"});
});
これで、実装した要素にマウスオーバーすると、ポップアップ表示されます。
オプション項目
activation: string (“hover” by default) – 起動させるアクションを指定します。”hover”, “focus” or “click”。ディフォルトは “hover” つまりマウスオーバーで起動します。
keepAlive: true of false (false by default) – true にすると、次のTipTipがアクティブになるまで、マウスアウトしてもポップアップは保持されます。
maxWidth: string (“200px” by default) – プップアップの横幅。”auto”も指定できるので、それがいいと思います。
edgeOffset: number (3 by default) – 要素からポップアップまでの距離指定します。
defaultPosition: string (“bottom” by default) – “top”, “bottom”, “left” or “right” 要素に対してポップアップをどの方向に表示するかを指定します。
delay: number (400 by default) – ポップアップするまでの時間
fadeIn: number (200 by default) – ポップアップのフェードインの時間
fadeOut: number (200 by default) – ポップアップのフェードアウトの時間
attribute: string (“title” by default) – HTMlの属性を指定すれば、その値がポップアップします
content: string (false by default) – ポップアップさせるテキストが、ここで指定したものに固定されます
enter: – ポップアップの前に実行する関数を指定できます。書式はこんな感じ→ enter: function() {alert()}
exit: – マウスアウトしたら実行する関数を指定できます。
実例
操作ボタンにどうぞ
<img src="image.png" class="tiptip" title="新規追加" />
$(function() {
$(".tiptip").tipTip();
});
操作ボタンの説明などにいかがでしょうか？
入力フォームにどうぞ
<input type="text" class="form_tiptip" title="半角数字で入力してください" />
$(function() {
$(".form_tiptip").tipTip({defaultPosition: "right", delay: 0, activation: 'focus', });
});
入力補助などにいかがでしょうか？
ポイントは、delay: 0 でポップアップまでの遅延をなくしていることと、マウスオーバーではなくフォーカスで起動するようにしているところです。
カスタマイズ
デザインはすべてCSSで指定しているので、カスタマイズも簡単です。
まず、よくある質問が、「文字がぼやけてて見にくい…」というもの。
これは、CSS3 の text-shadow が指定されている為ですので、CSSファイルの中から以下の行を見つけて、コメントアウトしてしまいましょう。
#tiptip_content {
/* text-shadow: 0 0 2px #000; */
}
ちなみに、text-shadow が効いているということは、あなたがお使いのブラウザは、CSS3に先行対応したモダンなブラウザだと言えますね（笑）
さて、本格的にカスタマイズしていきましょう。
まずは、どのような構造になっているのかを理解することが重要です。
ポップアップ部のHTMLは以下のような構造になっています。
<div id="tiptip_holder"> <div id="tiptip_arrow"> <div id="tiptip_arrow_inner"></div> </div> <div id="tiptip_content"></div> </div>
これをもとに、あとはCSSをいじってがんばってください！
というのもなんなんで、背景色を変更したサンプルをあげておきます。
CSSファイルの、#tiptip_content の背景色と、#tiptip_arrow_inner の枠線、そしてシャドウの色を変更します。
今回は、背景色を red、シャドウの色を pink と指定しています。
カスタマイズしたCSSファイルは配布します。
red と pink を好きな色に置換してお使いいただければ幸いです。
ダウンロードはこちら→tipTip