jQueryでスタイリッシュなツールチップを作ろうjQueryでスタイリッシュなツールチップを作ろう以前JavaScriptでツールチップの導入がはやった時期がありました(いきなり過去形ですが)。マウスをリンクや画像の上などに乗せると出てくる小さなポップアップのようなあれです。手軽にユーザビリティを向上させられるツールチップの需要は案外高く、その上簡単なスクリプトで作れることから、いろんなタイプのツールチップが数年前から公開されています。今回はデザイン的になかなかクールなclueTipというツールチップを見つけたので、紹介してみます。これはjQueryのプラグインなので使用するページでjQueryライブラリを読み込んでおく必要があります。何がデザイン的にふさわしい組み合わせかサンプルを踏まえながら見ていく予定です。ここにカーソルを合わせてみてください。導入に必要なもの(1)jQueryライブラリclueTipはjQueryのプラグインなので当然このライブラリが必要です。この場合、headタグ内に以下のようなURLでscriptタグを書き込めばOKです。一方でライブラリをダウンロードして使うという人は、こちらのサイトから。(2)clueTipプラグインそしてツールチップのプラグインであるclueTipをこのサイトからダウンロードしてきます。フォルダを開けるとなかに、JavaScriptファイルと、CSSファイル、そして画像を収めたフォルダとその他のファイルが入っていますが、直接関係するのはJSファイルとCSSファイルと画像フォルダの三つだけです。画像も使うかもしれないことを考えると、これらをcluetipというフォルダにまとめてページと同じ階層にアップロードしてしまうという手もあります。JSファイルとCSSファイルは後々書き換える箇所があります。(3)hoverIntentプラグインもうひとつどうしても必要なのがhoverIntentというjQueryのプラグインです。こちらのサイトで手に入れることができます。こちらのhoverIntent(minified)をダウンロードしましょう。いうわけで最低限必要なファイルは以下の四つここで最低限というのは、デザインにこだわらなければこれだけで十分という意味です。デザイン重視のものにしたい場合、これだけでは不十分です。UIのテーマを適用できるように、JSファイルとCSSファイルを一部書き換えてみるつもりです。その前にせっかく準備ができたので、まずは実際にclueTipの実装方法を見ていきたいと思います。ツールチップのスクリプト部分Ajaxを使うかどうかもっとも単純な例から見ていきます。ツールチップのリンク元をAタグにしてhrefとrel属性値を設定し、別ページを表示させるものです。cluetipメソッドを実行するだけで実現できます。ツールチップにはそのリンク元に関する簡単な情報や説明を載せたいというのがほとんどだと思います。次にテキスト内容をタグ要素のtitle属性に入れる方法を見ていきます。});Ajaxでない通常のツールチップはこのように、要素のtitle属性値のなかにタイトルと、本文のテキストを入れます。あり、この例では"|"を使用しています(間違っても全角記号を使用しないように!)。デリミッターはオプションのsplitTitleで指定します。2個目以降のデミリッターは本文の改行部分とみなされます。表示されたツールチップがいつまでも残ったままになりますstickyプロパティをtrueにすると、「閉じる」ボタンを押すまでツールチップが表示されたままになります。});閉じるボタンがタイトル側に表示されますclosePositionプロパティを'title'にすると、「閉じる」ボタンがタイトルの上に表示されます。closeTextプロパティに画像要素を指定することもできます。});隠していた要素を本文内容として表示させますあらかじめCSSなどで隠していた同ページ上の要素を本文内容として表示させることもできます。リンクのrel属性値に隠し要素のIDを設定します。ああああああああああああああああああああ次にスクリプト側のlocalプロパティをtrueにします。});マウスホバーではなく、クリックでチップが表示されますオプションのactivationプロパティを"click"にすると、クリック時にツールチップが出るようになります。});共通オプションはclueTipのコードを直接書き換えるもし、すべてのツールチップで共通するオプションがあるなら、それを個々のツールチップのオプションにいちいち設定するのは面倒です。デフォルトオプションが記述されている箇所があるので、ここをあらかじめ変更しておくと個別のオプション設定を不要にできます。下にjquery.cluetip.jsのコードの一部を表記してみます。},このなかでwidthとsplitTitleはここで設定しておいた方がいいかもしれません。これが嫌な人はcursorオプションをpointerなどに変更するといいでしょう。ツールチップをフェードインさせたい人はfxオプションを下のように変更します。openプロパティには、jQueryが用意しているエフェクト名をそのまま設定できる。openSpeedは"slow"や"normal"、または数値でもよい。ドキュメント・仕様のページなどを参考にしていろいろ試してみてください。UIのテーマを使ってデザインするホームページでテーマを確認するツールチップを大きく二つの部品に分けると、ヘッダー部分とコンテンツ部分に分かれます。ヘッダーにはタイトルが、コンテンツには本文が入ります。DOMレベルで見るともっと細かいですが。考慮するのはヘッダーとコンテンツの二種類のデザインだけで済みます。この上下二つのデザインさえ決まればもう完成したも同然なわけです。どのデザインを選ぶかになるとセンスの問題になるので単純ではありません。UIのホームページを見ると、スタイリッシュでバラエティに富むテーマが多数用意されています。UIのウィジェット群、つまりメニューとかボタンなどに適用させるためのものですが、使い方を理解していればページ上の他のパーツに容易にあてはめることができます。ツールチップも例外ではありません。前述しましたように、ここではこれらのテーマを参考にツールチップのデザインを考えていく予定です。最初から用意されているテーマだけで24種類もあり、さらには自分の好きな配色やスタイルにカスタマイズすることもできます。くわしくはこのページを参考にするといいでしょう。このページでは各テーマをそれぞれページ全体に適用して確認することができます。UIを利用するとなると、同サイトから様々なファイルをダウンロードしなければならなくなります。ウィジェットや機能を利用するわけではないので、単純にいえばCSSファイル(それと画像フォルダ)があれば十分です。UIのJavaScriptファイルは全く不要です。UIをすぐダウンロードするのは待ってください。UIのダウンロードはデザインが決まってからでいいのです。このダウンロードページでは、テーマを個別にしかダウンロードできないので、デザインが決まらないうちは何もできません。Rollerがあるため無駄になります。ツールチップの構成や個々のCSSのレイアウトを始めに理解しておく必要があります。順を追って見ていきましょう。ツールチップの仕組みを理解するツールチップのDOM構成がどうなっているか、次に示してあります。テキスト実際はインラインのstyle属性が細かく設定されているのですが、ソースが読みにくくなるため省いてあります。ID名がcluetip-innerのDIV要素で、この二つの要素がそれぞれタイトルとコンテンツを構成しています。自動的に生成されます。外側のDIV要素にはクラス名が指定してありますが、cluetipClassオプションでクラス名を指定していないのでデフォルトのスタイルが適用されています。ここで気になるのが、タイトルとコンテンツのいずれの要素にもクラス属性が設定されていないことです。UIのCSSファイルを使用するため、このままではスタイルを反映させることができません。書き換えることにしましょう。jQuery.clueTip.jsの45行目以降に、ツールチップの要素を作成するコードが書かれています。このコードを見る限りID属性しか振られていないのが分かります。UIのクラス属性を書き加えるわけです。ui-widget-headerとui-widget-contentというクラス名を一応入れておきます。UIウィジェットのクラス名です。UIのクラス名はいずれもui-で始まり、どのテーマも同じクラス名をベースにスタイルが構成されています。簡単に切り替えることができるなどメリットも多いです。UIのCSSファイルの中身がどうなっているか見てみることにします。}非常に見にくくて恐縮ですが、ここにCSSの一部をあげてみました。ツールチップのデザインに使用するクラス名はここにあるのがすべてです。正確にはui-widget-から始まる2つと、ui-state-から始まる5つの合計7つです。ツールチップに適用するクラスui-widget-headerui-widget-contentui-state-defaultui-state-hoverui-state-activeui-state-highlightui-state-errorui-state-errorこのなかでui-widget-headerとui-widget-contentは先ほどclueTipのスクリプトに追加したものです。デザイン的に見て、この二つの組み合わせがそのテーマの基本になります。その組み合わせが気に入らなければ、他のクラス名と切り替えればいいのです。Rollerについて説明しましょう。UI関連のCSSをすべて同じテーマのものに変換するというものです。Switcherというプラグインが用意されていて、このページにも設置してあります。下のボタンがそれです。クリックするとポップダウンメニューにテーマがズラッと並ぶので、そのなかから好きなテーマを選択します。するとボタンの下に配置した各クラスごとの要素がテーマに合わせて切り替わります。カーソルを各要素の上に置くと、ツールチップのヘッダー部分がそのスタイルに切り替わるので(ただし、コンテンツ部分はずっとui-widget-contentのままです)、自分にマッチした組み合わせを探して見てください。ui-widget-headerui-widget-contentui-state-defaultui-state-hoverui-state-activeui-state-highlightui-state-errorui-corner-allちなみに最後のui-corner-allというのは、CSS3の技術で要素を角丸にするクラス名。ui-corner-top、ui-corner-bottomはそれぞれ上下の両側の角だけを丸くし、ui-corner-right、ui-corner-leftはそれぞれ左右の側にある角を丸くします。Explorerはバージョン8までCSS3に対応してないので丸くなりません。その他のブラウザでは最新バージョンなら角丸が適用されるはずです。見つかったなら、テーマの名称とタイトル・コンテンツに適用するクラス名をメモっておいてください。UIのホームページでテーマをダウンロードしてきます。このダウンロードページでは、不必要に多くのコンポーネントをダウンロードしないよう注意しましょう。UIのすべての機能をダウンロードしようとすると、CSSファイルだけで80K近いサイズになってしまうからです。Coreのなかの4つにチェックを入れるだけで十分です。忘れてはいけませんが、右側のカラムにテーマを選択するメニューがあるので、こちらでお気に入りのテーマを選んでください。lightnessになっています。ダウンロードしてきたファイルを解凍して開くと、CSSというフォルダが入っています。前述したように今回はデザイン面での使用に限られるので、JavaScriptファイルなどは一切不要です。このCSSフォルダを開くと選択したテーマの名称のフォルダが入っています。手間が省けると思います。UIのCSSファイル(および画像)を追加CSSの変更はclueTipだけにする最後にツールチップのスタイルを修正する作業があります。お互いに干渉し合わないようにするためです。UIのCSSには極力手をつけないようにします。それではclueTipのCSSファイルの内容を見てみましょう。}デフォルトのスタイルが書かれている上の部分を見てください。jquery.cluetip.cssに用意されているスタイルは3種類で、いずれもクラス名がcluetip-で始まっています。これはcluetipClassプロパティでクラスを選択するための決まり事です。修正するスタイルはこのdefaultのみでいいはずです(cluetipClassを指定しなければdefaultになるからです)。transparentなどにして無害化します。修正していくといいでしょう。下の例では、あえてdefaultに手を加えず、別のクラス名で作り直してもいい。}これで準備はほぼ終わりです。後はファイルや画像等を適切にマークアップしてサイトにアップロードするだけです。clueTipのスタイルそのままでも十分通用するので、やはり好みやサイトの趣向に合ったデザインを選ぶのがいいと思います。UIはその特性上、同一ページで複数のテーマを同時に確認できません。そこで、各テーマの外観を画像にして並べることにしました。組み合わせだけ表示するようにしています。Lazyloadを使っています。企業とか公的なサイトで使われそう。ui-state-hoverとui-state-highlightのヘッダーもなかなかいい。ダーク系のなかでは一番無難な線。クールでしゃれた感じのサイトに似合う。デフォのui-widget-header以外の組み合わせは個人的にイマイチ。地味だが、目立つことにメリットがないツールチップの特性を考えたら案外最適かもしれない。ui-state-default、ui-state-hoverもいい。青と白のコントラストがグッド。ui-state-default、ui-state-hoverもいい。個人的にui-state-defaultの繊細なところがいい。温かみのあるコンテンツ色。陽気路線ならむしろデフォ以外の方がいい。ui-state-hoverとか。陰気なイメージはない。デフォより上下が色彩反転のui-state-defaultやui-state-hoverがいい感じ。挙げるならui-state-defaultかui-state-hover。Smoothnessと同じ万能系といいたいけど、さすがに淡泊すぎるか。ui-state-hoverはインパクトがある。渋い味わいがグッド!。好バランス型のui-state-defaultが自分は一番かな。ダーク系だけどやや女の子っぽい。選ぶとすればデフォかui-state-default、ui-state-hoverあたり。ダーク系にしてはインパクトの強い組み合わせが多い。背景の模様が気に入るかどうか。ui-state-errorはどうかと思うけどそれ以外ハズレがない。落ち着いた色調と温かみのある色彩がいい。緑さえ選ばなければ......。なんか攻撃的なデフォ。その他はそう悪くない。使いどころを間違えなければui-state-errorもかわいくていい。デフォは木目のような温もり。全体的に落ち着いた色調でグッド。個人的にバランス型のui-state-defaultがいい。ポップでややクセのあるデザイン。タイトルの背景画像が好きならいいかも。デフォよりui-state-activeがいい。色彩はそんなにどぎつくないけど、見た目が結構目立つかも。