読者です 読者をやめる 読者になる 読者になる

matsukaz's blog

Agile, node.js, ruby, AWS, cocos2d-xなどなどいろいろやってます

ツールチップを表示する

jQuery

ツールチップを表示するjQueryプラグインとしてはjTiptooltip demojQuery Tooltip PluginclueTipなどがあげられます。今回はこの中でも一番よさげなclueTipをご紹介。

clueTipを利用すると、こんな感じでマウスのフォーカスに合わせてツールチップを表示することができます。

画像にあるようなツールチップを表示したい場合は、HTMLをこんな感じで定義して、

<a class="title" href="#" title="This is the title|The first set of contents comes after the first delimiter in the title.|In this case, the delimiter is a pipe">

Javascriptにはこんな記述をします。

$(document).ready(function(){
    $('a.title').cluetip({splitTitle: '|'});
}

APIやOptionを利用すれば、もっと凝ったこともできます。
以下は、タグの属性ではなくタグの要素内の値をツールチップとして表示するやり方。HTMLはこんなんで、

<a rel="#helpcontents" class="tooltip" style="cursor: default;">ヘルプ表示</a>
<span id="helpcontents" style="display: none;">ヘルプの内容<BR/>タグも含められます。</span>

Javascriptはこう書きます。

$(document).ready(function(){
    $(".tooltip").cluetip({local:true, showTitle: false, dropShadow: false, width: 300}); 
}

この場合は、spanタグ内の値がツールチップとして表示されます。また、ツールチップからタイトルと影はなくなり、幅も300pxに固定化されます。ポイントは、cluetipに対するlocal:trueの記述や、a要素のrel属性とspan要素のid属性の値など。詳細はAPIのページでご確認ください。