アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

ツールチップjQueryプラグイン「qtip」を使ってみました

皆様、こんばんは。
笹亀です。

先日、自分の開発用のサーバがお亡くなりになられて、悲しい気持ちでちゃんと供養をさせていただきました。
話は変わりますが最近、Safari4が正式リリースされ、早速ダウンロードして使わせていただいております。体感速度で若干速くなったような気がしています。見た目でも変わっていて楽しませてもらっています。

今回は、jQueryプラグインのひとつで「qtip」を使ってみました。ツールチップ形式でポップアップで手軽に実装でき、奇麗に表示することができるのが特徴です。実際に使用したスクリプトと一緒に使った方法のご紹介をしていきます。

「qtip」を使うには「jquery-1.3.2min.js jquery.qtip-1.0.0-rc3.min.js」を読み込めばすぐに使えます!下記のURLからダウンロードできます。
http://craigsworks.com/projects/qtip/download/

実際のコードはこのようになります。


<script type="text/javascript">
      jQuery('raumen').qtip({
        content: '<div style="font-size: 80%;color:#ff0000;" align="left">※ここに表示したいHTMLを記載できます</div><a href="https://www.asial.co.jp***.jpg &mode=1" class="popupimg"><img src="https://www.asial.co.jp***.jpg"></a></div>'
        ,
        style: {
          width: '250px',
          border: {color: 'green'},
          tip: {corner: 'topLeft'}
        }
        ,
        position: {
          corner:{target: 'bottomLeft'}
        }
        ,
        show: 'mouseover',
        hide: { when: { event: 'mouseout'}, delay: 1500 }
        });
</script>


とっても簡単ですね!

簡単にスクリプトの説明をさせていただきます。
content:アクションを起こしたタイミングで表示される内容を記載します
style:表示する枠のデザインを指定できます
position:表示箇所を指定できます
show:表示するときのアクションを指定します
hide:表示を閉じるときのアクションを指定します


「qtip」で表示した枠内でjavascriptをさらに呼び出すことも可能です。ということは、AJAXのように動的な動作をさせることもできるのです。


<script type="text/javascript">
  jQuery('raumen').qtip(
       {
          content: {
             title: {
                text: '<strong>西武鉄道 101系・旧塗装 2両セット</strong>',
                button: '<span style="color:#fff; font-size: 80%;">キャンセル</span>'
             },
             text: 
              '<div>この製品の評価(星の数)を、下記プルダウンメニューから選んで、商品選択ボタンをクリックしてください。</div>' + 
              '<div><select name="rating" id="ss"><option value="5">★★★★★</option><option value="4">★★★★</option><option value="3">★★★</option><option value="2">★★</option><option value="1">★</option><option value="">評価なし</option></select></div>' +
              '<div><input type="button" value="追加する" onclick="addProduct();jQuery(\'.qtip\').hide();" /></div>'
          },
          position: {
            corner: {
               target: 'center', // Position the tooltip above the link
               tooltip: 'center'
            }
          },
          show: {
             when: 'click', // Show it on click
             solo: true // And hide all other tooltips
          },
          hide: false,
          style: {
             width: '400px',
             name: 'dark'
          }
       });
</script>



「qtip」は非常に実装が簡単で使い勝手が良くて気に入っております。ドキュメント非常によくできていてわかりやすいです。(英語ですが。。
オプション設定などの細かい設定の記述方法は下記に記載されています。
http://craigsworks.com/projects/qtip/docs/

サンプルも豊富で下記よりスクリプトも一緒に確認できます。
http://craigsworks.com/projects/qtip/demos/



今回使用した画像で気付かれた方がどのくらいいらっしゃるかわかりませんが、実は弊社で運用している鉄道模型コミュニティサイトのトレイントレインのサイトで実際に使用している箇所を記述しました。トレイントレイン内で「qtip」は利用させていただいております。

この機会に皆さんも是非、ご利用してみてはいかがでしょうか。