jQueryのjTip （ツールチップ）

DSでオープンソース。そのうち手を出してみたいですな。

ブラウザでツールチップを出したいと思い、jQueryのjTipっていうプラグインを使ってみたのでメモ。ここの「DownLoad This Example」からダウンロードしたけど、それでいいんだろうか？

１．初期化
jtip.jsを読み込めば初期化されるが、自分の初期化プロセスに組み込むときは

JT_init();

を呼べばいいと思う。たぶん。

２．使い方
ツールチップを出したい部分をaタグで囲む。表示したい内容を返すページのURLをhrefに書く。?以降は多分ウインドウ幅。
idはちゃんと指定する。このidで要素を取得して、その近くにツールチップを出すっぽい。
同封のglobal.cssを使う場合はclass=”jTip”。この場合、同封のimagesを使うとロード中の画像とか出てカッコイイ。Ajaxです。
nameで指定したものがツールチップのタイトルになる。

<a href="hogehoge.htm?300" id="foo" class="jTip" name="bar">ツールチップ</a>

３．CakePHP
CakePHPで使ってみた。まあ、別にどうということはないけど。ちょっとはまったことは、hrefのURL。CakePHPとかの場合、URLが「コントローラ名＋メソッド名＋引数」などになって、URL相対指定するとわけがわからないURLになってしまう。
ということで絶対指定すればいいわけだが、あるいは「$this->webroot」をビューでechoすれば、ルートからのURLが得られます。

webroot = "<?php echo $this->webroot; ?>";
$(function(){
    $("#tooltip").html('<a href="'+webroot+'hogehoge/hoge?300" id="foo" class="jTip" name="bar">ツールチップ</a>');
});

<div id="tooltip"></div>

以上