jQueryでスタイリッシュなツールチップを作ろう

　以前JavaScriptでツールチップの導入がはやった時期がありました（いきなり過去形ですが）。マウスをリンクや画像の上などに乗せると出てくる小さなポップアップのようなあれです。手軽にユーザビリティを向上させられるツールチップの需要は案外高く、その上簡単なスクリプトで作れることから、いろんなタイプのツールチップが数年前から公開されています。今回はデザイン的になかなかクールなclueTipというツールチップを見つけたので、紹介してみます。また、これはjQueryのプラグインなので使用するページでjQueryライブラリを読み込んでおく必要があります。ただ、同時にjQuery UIの膨大なテーマを利用することを考えており、何がデザイン的にふさわしい組み合わせかサンプルを踏まえながら見ていく予定です。

ここにカーソルを合わせてみてください。

長いので目次付き

導入に必要なもの
ツールチップのスクリプト部分
jQuery UIのテーマを使ってデザインする
ツールチップのスタイルを修正する
- jQuery UIのテーマをダウンロードする
- CSSの変更はclueTipだけにする
jQuery UIテーマ　早わかり画像集

導入に必要なもの

（１）jQueryライブラリ

　clueTipはjQueryのプラグインなので当然このライブラリが必要です。ただし、面倒な自サイトへの設置を肩代わりしてくれるGoogleのサービスがあるのでこちらを利用するのもいいでしょう。この場合、headタグ内に以下のようなURLでscriptタグを書き込めばOKです。一方でライブラリをダウンロードして使うという人は、こちらのサイトから。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

（２）clueTipプラグイン

　そしてツールチップのプラグインであるclueTipをこのサイトからダウンロードしてきます。フォルダを開けるとなかに、JavaScriptファイルと、CSSファイル、そして画像を収めたフォルダとその他のファイルが入っていますが、直接関係するのはJSファイルとCSSファイルと画像フォルダの三つだけです。画像も使うかもしれないことを考えると、これらをcluetipというフォルダにまとめてページと同じ階層にアップロードしてしまうという手もあります。なお、 JSファイルとCSSファイルは後々書き換える箇所があります。

<script type="text/javascript" src="cluetip/jquery.cluetip.js"></script> <link rel="stylesheet" href="cluetip/jquery.cluetip.css" type="text/css" media="screen" />

（３）hoverIntentプラグイン

　もうひとつどうしても必要なのがhoverIntentというjQueryのプラグインです。マウスホバーのイベント制御をより高い自由度で行えるものらしく、こちらのサイトで手に入れることができます。軽量版が用意されているのでこちらのhoverIntent(minified)をダウンロードしましょう。

そういうわけで最低限必要なファイルは以下の四つ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script> <script type="text/javascript" src="cluetip/jquery.cluetip.js"></script> <link rel="stylesheet" href="cluetip/jquery.cluetip.css" type="text/css" media="screen" />

　ここで最低限というのは、デザインにこだわらなければこれだけで十分という意味です。しかし、最初から用意されているデザインはデフォルトのを含め3種類だけであり、デザイン重視のものにしたい場合、これだけでは不十分です。そこで、この後にjQuery UIのテーマを適用できるように、JSファイルとCSSファイルを一部書き換えてみるつもりです。しかし、その前にせっかく準備ができたので、まずは実際にclueTipの実装方法を見ていきたいと思います。

ツールチップのスクリプト部分

Ajaxを使うかどうか

もっとも単純な例から見ていきます。ツールチップのリンク元をAタグにしてhrefとrel属性値を設定し、別ページを表示させるものです。

ここにカーソルを合わせてみてください

HTMLに記述する部分 <p> <a id="tooltip1" href="http://wiz-code.digick.jp/blog/" rel="http://wiz-code.digick.jp/blog/">ここにカーソルを合わせてみてください</a> </p>

スクリプト部分 $('#tooltip1').cluetip();

これはタイトル部分が表示されません

Ajax系のツールチップは、オプションのshowTitleをfalseに設定することで不要なタイトル部分を隠すことができる $('#tooltip2').cluetip({ showTitle: false });

　上のサンプルはAjaxで外部のHTML情報などを取得し、ツールチップ内に反映させるものですが、スクリプトの部分を見てもらえれば分かるとおり、$()で要素を取得し、 cluetipメソッドを実行するだけで実現できます。しかし、たいていツールチップにはそのリンク元に関する簡単な情報や説明を載せたいというのがほとんどだと思います。次にテキスト内容をタグ要素のtitle属性に入れる方法を見ていきます。

タイトルと本文を"|"で区切る

カーソルを合わせるとタイトルと本文を表示します

HTMLに記述する部分 <p> <a id="tooltip3" class="tooltip" title="タイトル|本文　テキスト　本文　テキスト　本文　テキスト　本文　テキスト　本文　テキスト">カーソルを合わせるとタイトルと本文を表示します</a> </p>

スクリプト部分 $('#tooltip3').cluetip({ splitTitle: '|' });

　Ajaxでない通常のツールチップはこのように、要素のtitle属性値のなかにタイトルと、本文のテキストを入れます。ここで、タイトルと本文の区別をつけるためにデリミッター（区切り文字）を指定することが必須であり、この例では"|"を使用しています（間違っても全角記号を使用しないように！）。デリミッターはオプションのsplitTitleで指定します。これを忘れるとツールチップが表示されないことがあるので注意してください。また、2個目以降のデミリッターは本文の改行部分とみなされます。

オプションで設定するさまざまな機能

表示されたツールチップがいつまでも残ったままになります

stickyプロパティをtrueにすると、「閉じる」ボタンを押すまでツールチップが表示されたままになります。 $('#tooltip4').cluetip({ splitTitle: '|', sticky: true });

閉じるボタンがタイトル側に表示されます

closePositionプロパティを'title'にすると、「閉じる」ボタンがタイトルの上に表示されます。また、closeTextプロパティに画像要素を指定することもできます。 $('#tooltip5').cluetip({ splitTitle: '|', sticky: true, closePosition: 'title', closeText: '<div class="close_icon" title="閉じる"></div>' });

隠していた要素を本文内容として表示させます

あらかじめCSSなどで隠していた同ページ上の要素を本文内容として表示させることもできます。まず、リンクのrel属性値に隠し要素のIDを設定します。  <div id="hidden_element" style="display: none;">ああああああああああああああああああああ</div>

次にスクリプト側のlocalプロパティをtrueにします。 $('#tooltip6').cluetip({ local: true });

マウスホバーではなく、クリックでチップが表示されます

オプションのactivationプロパティを"click"にすると、クリック時にツールチップが出るようになります。 $('#tooltip7').cluetip({ activation: 'click' });

共通オプションはclueTipのコードを直接書き換える

　もし、すべてのツールチップで共通するオプションがあるなら、それを個々のツールチップのオプションにいちいち設定するのは面倒です。jquery.cluetip.jsをエディタで開けると、デフォルトオプションが記述されている箇所があるので、ここをあらかじめ変更しておくと個別のオプション設定を不要にできます。下にjquery.cluetip.jsのコードの一部を表記してみます。

デフォルトオプションの記述は450行目あたりから $.fn.cluetip.defaults = { width: 275, height: cluezIndex: 97, positionBy: topOffset: 15, leftOffset: 15, local: localPrefix: null, hideLocal: attribute: titleAttribute: splitTitle: '', escapeTitle: showTitle: cluetipClass: hoverClass: '', waitImage: cursor: 'help', arrows: dropShadow: dropShadowSteps: 6, sticky: mouseOutClose: activation: clickThrough: tracking: delayedClose: 0, closePosition: closeText: truncate: 0, // effect and fx: { open: openSpeed: '' }, // settings for hoverIntent: { sensitivity: 3, interval: 50, timeout: 0 }, // set up default options // The width of the clueTip 'auto', // The height of the clueTip // Sets the z-index style property of the clueTip 'auto', // Sets the type of positioning: 'auto', 'mouse','bottomTop', 'fixed' // Number of px to offset clueTip from top of invoking element // Number of px to offset clueTip from left of invoking element false, // Whether to use content from the same page for the clueTip's body // string to be prepended to the tip attribute if local is true true, // If local option is set to true, this determines whether local content // to be shown in clueTip should be hidden at its original location 'rel', // the attribute to be used for fetching the clueTip's body content 'title', // the attribute to be used for fetching the clueTip's title // A character used to split the title attribute into the clueTip title and divs // within the clueTip body. more info below [6] false, // whether to html escape the title attribute true, // show title bar of the clueTip, even if title attribute not set 'default',// class added to outermost clueTip div in the form of 'cluetip-' + clueTipClass. // class applied to the invoking element onmouseover and removed onmouseout true, // whether to show a "loading" img, which is set in jquery.cluetip.css false, // if true, displays arrow on appropriate side of clueTip true, // set to false if you don't want the drop-shadow effect on the clueTip // adjusts the size of the drop shadow false, // keep visible until manually closed false, // close when clueTip is moused out 'hover', // set to 'click' to force user to click to show clueTip // set to 'focus' to show on focus of a form element and hide on blur false, // if true, and activation is not 'click', then clicking on link will take user to the link's href, // even if href and tipAttribute are equal false, // if true, clueTip will track mouse movement (experimental) // close clueTip on a timed delay (experimental) 'top', // location of close text for sticky cluetips; can be 'top' or 'bottom' or 'title' 'Close', // text (or HTML) to to be clicked to close sticky clueTips // number of characters to truncate clueTip's contents. if 0, no truncation occurs speed for opening clueTips 'show', // can be 'show' or 'slideDown' or 'fadeIn' when hoverIntent plugin is used

　このなかでwidthとsplitTitleはここで設定しておいた方がいいかもしれません。また、カーソルをリンクに合わせると自動的に「？」マークがカーソルにつくので、これが嫌な人はcursorオプションをpointerなどに変更するといいでしょう。また、ツールチップの出現時エフェクトはデフォルトで「なし」に設定されているので、ツールチップをフェードインさせたい人はfxオプションを下のように変更します。

openプロパティには、jQueryが用意しているエフェクト名をそのまま設定できる。openSpeedは"slow"や"normal"、または数値でもよい。 // effect and speed for opening clueTips fx: { open: 'fadeIn', // can be 'show' or 'slideDown' or 'fadeIn' openSpeed: 'fast' },

　その他にもさまざまな機能がありますが、ここでは紹介しきれないので、デモページやドキュメント・仕様のページなどを参考にしていろいろ試してみてください。

jQuery UIのテーマを使ってデザインする

ホームページでテーマを確認する

　ツールチップを大きく二つの部品に分けると、ヘッダー部分とコンテンツ部分に分かれます。ヘッダーにはタイトルが、コンテンツには本文が入ります。もっともDOMレベルで見るともっと細かいですが。このため、ツールチップのデザインを決めるときに考慮するのはヘッダーとコンテンツの二種類のデザインだけで済みます。この上下二つのデザインさえ決まればもう完成したも同然なわけです。作業自体は単純です。

　ただし、どのデザインを選ぶかになるとセンスの問題になるので単純ではありません。幸いなことにjQuery UIのホームページを見ると、スタイリッシュでバラエティに富むテーマが多数用意されています。これらは本来jQuery UIのウィジェット群、つまりメニューとかボタンなどに適用させるためのものですが、使い方を理解していればページ上の他のパーツに容易にあてはめることができます。もちろんツールチップも例外ではありません。前述しましたように、ここではこれらのテーマを参考にツールチップのデザインを考えていく予定です。最初から用意されているテーマだけで24種類もあり、さらには自分の好きな配色やスタイルにカスタマイズすることもできます。くわしくはこのページを参考にするといいでしょう。このページでは各テーマをそれぞれページ全体に適用して確認することができます。

　一方で、jQuery UIを利用するとなると、同サイトから様々なファイルをダウンロードしなければならなくなります。しかし、今回はjQuery UIのデザイン・テーマを利用するだけで、ウィジェットや機能を利用するわけではないので、単純にいえばCSSファイル（それと画像フォルダ）があれば十分です。jQuery UIのJavaScriptファイルは全く不要です。

　でも、jQuery UIをすぐダウンロードするのは待ってください。jQuery UIのダウンロードはデザインが決まってからでいいのです。むしろ、このダウンロードページでは、テーマを個別にしかダウンロードできないので、デザインが決まらないうちは何もできません。また、すべてのテーマをダウンロードするのもテーマの確認ページや後に説明するTheme Rollerがあるため無駄になります。

　jQuery UIのテーマをツールチップに適用するには、clueTipのJSファイルとCSSファイルの書き換えや、場合によってはjQuery UIのCSSファイルに手を加える必要も出てくるため、ツールチップの構成や個々のCSSのレイアウトを始めに理解しておく必要があります。順を追って見ていきましょう。

ツールチップの仕組みを理解する

ツールチップのDOM構成がどうなっているか、次に示してあります。 <div id="cluetip" class="clue-right-default cluetip-default"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div id="cluetip-outer"> <h3 id="cluetip-title">タイトル</h3> <div id="cluetip-inner">本文　テキスト</div> </div> <div id="cluetip-extra"></div> <div class="cluetip-arrows" id="cluetip-arrows"></div> </div>

　実際はインラインのstyle属性が細かく設定されているのですが、ソースが読みにくくなるため省いてあります。ここで注目してもらいたいのが、ID属性名がcluetip-titleのH3要素と、同じくID名がcluetip-innerのDIV要素で、この二つの要素がそれぞれタイトルとコンテンツを構成しています。これらの要素はclueTipプラグインが呼び出されたとき自動的に生成されます。また、一番外側のDIV要素にはクラス名が指定してありますが、cluetipClassオプションでクラス名を指定していないのでデフォルトのスタイルが適用されています。ここで気になるのが、タイトルとコンテンツのいずれの要素にもクラス属性が設定されていないことです。clueTipに始めから用意されているスタイルを使うのなら問題はないのですが、今回はjQuery UIのCSSファイルを使用するため、このままではスタイルを反映させることができません。jQuery.clueTip.jsのファイルを再び開いて一部を書き換えることにしましょう。

jQuery.clueTip.jsの45行目以降に、ツールチップの要素を作成するコードが書かれています。48～49行目にタイトルとコンテンツに相当するタグが確認できますが、このコードを見る限りID属性しか振られていないのが分かります。ここにjQuery UIのクラス属性を書き加えるわけです。この時点ではクラス名はまだ確定ではないものの、 ui-widget-headerとui-widget-contentというクラス名を一応入れておきます。

書き換え前のコード // create the cluetip divs if (!$('#cluetip').length) { $(['<div id="cluetip">', '<div id="cluetip-outer">', '<h3 id="cluetip-title"></h3>',　　　//ここがタイトル部分 '<div id="cluetip-inner"></div>', //ここがコンテンツ部分 '</div>', '<div id="cluetip-extra"></div>', '<div id="cluetip-arrows" class="cluetip-arrows"></div>', '</div>'].join('')) [insertionType](insertionElement).hide(); 書き換え後のコード // create the cluetip divs if (!$('#cluetip').length) { $(['<div id="cluetip">', '<div id="cluetip-outer">', //タイトルにui-widget-headerというクラス名を追加 '<h3 id="cluetip-title" class="ui-widget-header"></h3>', //コンテンツにui-widget-contentというクラス名を追加 '<div id="cluetip-inner" class="ui-widget-content"></div>', '</div>', '<div id="cluetip-extra"></div>', '<div id="cluetip-arrows" class="cluetip-arrows"></div>', '</div>'].join('')) [insertionType](insertionElement).hide();

　このui-widget-headerとui-widget-contentはjQuery UIウィジェットのクラス名です。 jQuery UIのクラス名はいずれもui-で始まり、どのテーマも同じクラス名をベースにスタイルが構成されています。これはクラス名を変えないかぎり複数のテーマを同一のページで使えないことを意味していますが、反面Theme Rollerによってページ全体のテーマを簡単に切り替えることができるなどメリットも多いです。それでは、実際にjQuery UIのCSSファイルの中身がどうなっているか見てみることにします。

smoothnessというテーマのCSS /* Component containers ----------------------------------*/ .ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; } .ui-widget .ui-widget { font-size: 1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; } .ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; } .ui-widget-content a { color: #222222; } .ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; } .ui-widget-header a { color: #222222; } /* Interaction states ----------------------------------*/ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3; background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #555555; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; text-decoration: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999; background: #dadada url(images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; } .ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-decoration: none; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; } .ui-widget :active { outline: none; } /* Interaction Cues ----------------------------------*/ .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #fcefa1; background: #fbf9ee url(images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x; color: #363636; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636; } .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url(images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x; color: #cd0a0a; } .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a; } .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a; }

　非常に見にくくて恐縮ですが、ここにCSSの一部をあげてみました。しかし、ツールチップのデザインに使用するクラス名はここにあるのがすべてです。正確にはui-widget-から始まる2つと、ui-state-から始まる5つの合計7つです。

ツールチップに適用するクラス
ui-widget-header
ui-widget-content
ui-state-default
ui-state-hover
ui-state-active
ui-state-highlight
ui-state-error
ui-state-error

　このなかでui-widget-headerとui-widget-contentは先ほどclueTipのスクリプトに追加したものです。デザイン的に見て、この二つの組み合わせがそのテーマの基本になります。もしその組み合わせが気に入らなければ、他のクラス名と切り替えればいいのです。

Theme Rollerで好きなデザインを見つける

　ここでTheme Rollerについて説明しましょう。これはページ上にあるjQuery UI関連のCSSをすべて同じテーマのものに変換するというものです。 Theme Switcherというプラグインが用意されていて、このページにも設置してあります。すぐ下のボタンがそれです。クリックするとポップダウンメニューにテーマがズラッと並ぶので、そのなかから好きなテーマを選択します。するとボタンの下に配置した各クラスごとの要素がテーマに合わせて切り替わります。また、カーソルを各要素の上に置くと、ツールチップのヘッダー部分がそのスタイルに切り替わるので（ただし、コンテンツ部分はずっとui-widget-contentのままです）、自分にマッチした組み合わせを探して見てください。

ui-widget-header

ui-widget-content

ui-state-default

ui-state-hover

ui-state-active

ui-state-highlight

ui-state-error

ui-corner-all

　ちなみに最後のui-corner-allというのは、CSS3の技術で要素を角丸にするクラス名。ui-corner-allは要素の四隅を丸くし、 ui-corner-top、ui-corner-bottomはそれぞれ上下の両側の角だけを丸くし、ui-corner-right、ui-corner-leftはそれぞれ左右の側にある角を丸くします。なお、Internet Explorerはバージョン8までCSS3に対応してないので丸くなりません。その他のブラウザでは最新バージョンなら角丸が適用されるはずです。

ツールチップのスタイルを修正する

jQuery UIのテーマをダウンロードする

　お気に入りのデザインは見つかったでしょうか？　もし見つかったなら、テーマの名称とタイトル・コンテンツに適用するクラス名をメモっておいてください。さっそくjQuery UIのホームページでテーマをダウンロードしてきます。このダウンロードページでは、不必要に多くのコンポーネントをダウンロードしないよう注意しましょう。というのも、jQuery UIのすべての機能をダウンロードしようとすると、CSSファイルだけで80K近いサイズになってしまうからです。ツールチップのデザインにかかわる部分だけなら、 UI Coreのなかの4つにチェックを入れるだけで十分です。そして忘れてはいけませんが、右側のカラムにテーマを選択するメニューがあるので、こちらでお気に入りのテーマを選んでください。デフォルトはUI lightnessになっています。

ダウンロードしてきたファイルを解凍して開くと、CSSというフォルダが入っています。前述したように今回はデザイン面での使用に限られるので、JavaScriptファイルなどは一切不要です。また、このCSSフォルダを開くと選択したテーマの名称のフォルダが入っています。もし、自分のサイトでCSSファイルを置く専用のフォルダを用意しているのなら、このテーマ名のフォルダごとそこにアップロードすると手間が省けると思います。

jQuery UIのCSSファイル（および画像）を追加 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script> <script type="text/javascript" src="cluetip/jquery.cluetip.js"></script> <link rel="stylesheet" href="cluetip/jquery.cluetip.css" type="text/css" media="screen" />  <link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" />

CSSの変更はclueTipだけにする

　最後にツールチップのスタイルを修正する作業があります。これが必要なのは、clueTipとjQuery UIの二つのスタイルが、お互いに干渉し合わないようにするためです。ただし、どのみちjQuery UIのスタイルを優先することになるので、修正するのはclueTipのCSSだけでよく、 jQuery UIのCSSには極力手をつけないようにします。それではclueTipのCSSファイルの内容を見てみましょう。 /*************************************** =cluetipClass: 'default' -------------------------------------- */ .cluetip-default { background-color: #d9d9c2; } .cluetip-default #cluetip-outer { position: relative; margin: 0; background-color: #d9d9c2; } .cluetip-default h3#cluetip-title { margin: 0 0 5px; padding: 8px 10px 4px; font-size: 1.1em; font-weight: normal; background-color: #87876a; color: #fff; } .cluetip-default #cluetip-title a { color: #d9d9c2; font-size: 0.95em; } .cluetip-default #cluetip-inner { padding: 10px; } .cluetip-default div#cluetip-close { text-align: right; margin: 0 5px 5px; color: #900; }

　デフォルトのスタイルが書かれている上の部分を見てください。jquery.cluetip.cssに用意されているスタイルは3種類で、いずれもクラス名がcluetip-で始まっています。これはcluetipClassプロパティでクラスを選択するための決まり事です。さて、デザイン面をjQuery UIのテーマに任せているので、修正するスタイルはこのdefaultのみでいいはずです（cluetipClassを指定しなければdefaultになるからです）。テーマ固有のスタイル（背景色・文字色）を殺さないために、まず見た目の影響が大きいcolorやbackground-colorプロパティを削除するか、 transparentなどにして無害化します。次に必要に応じてmargin、padding、font-size、font-weightなどを修正していくといいでしょう。

修正後のCSS。下の例では、あえてdefaultに手を加えず、別のクラス名で作り直してもいい。 /*************************************** =cluetipClass: 'default' -------------------------------------- */ .cluetip-default { background-color: transparent; } .cluetip-default #cluetip-outer { position: relative; margin: 0px; background-color: transparent; } .cluetip-default h3#cluetip-title { margin: 0px 0px 5px; margin-bottom: 0px; padding: 8px 10px 4px; font-size: 13px; font-weight: bold; background-color: transparent; } .cluetip-default #cluetip-title a { font-size: 13px; } .cluetip-default #cluetip-inner { text-align: left; font-size: 13px; padding: 10px; } .cluetip-default div#cluetip-close { text-align: right; margin: 0px 5px 5px; color: #900; }

　これで準備はほぼ終わりです。後はファイルや画像等を適切にマークアップしてサイトにアップロードするだけです。ツールチップのスタイルは今回jQuery UIのテーマを紹介しましたが、 clueTipのスタイルそのままでも十分通用するので、やはり好みやサイトの趣向に合ったデザインを選ぶのがいいと思います。また、このページでテーマを自分流にアレンジやカスタマイズすることもできるので、これらのテーマで納得しないという人はぜひ試してみてください

jQuery UIテーマ　早わかり画像集

　jQuery UIはその特性上、同一ページで複数のテーマを同時に確認できません。そこで、各テーマの外観を画像にして並べることにしました。ツールチップもui-widget-headerとui-widget-contentの組み合わせだけ表示するようにしています。ちなみにページロード時に全画像が一気にロードされないようjQuery Lazyloadを使っています。