マウスオーバーでtwitterのユーザー情報を表示する「twttrFloatTip」-JavaScript Library Archive

マウスオーバーでtwitterのユーザー情報を表示する「twttrFloatTip」

twttrFloatTipはマウスオーバーでtwitterのユーザー情報を表示する為のjQueryプラグインです。

まずは、jQuery本体と配布元よりダウンロードしたtwttrFloatTip.jsをhead要素などで読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="twttrFloatTip.js"></script>

次にtwttrFloatTip.cssも読み込みます。この際に同梱されいているimgフォルダと同じ階層にフォルダを作成しその中にCSSファイルを入れておく様にしてください。画像のパスがずれて画像が表示されなくなる恐れがあります。

css/twttrFloatTip.css
img/画像ファイル

<link type="text/css" rel="stylesheet" href="./css/twttrFloatTip.css" />

ユーザー情報を表示したいa要素には任意のclass名を付け、href属性にtwitterのURLを記述しておきます。

<a href="http://twitter.com/KazumaNishihata" class="tw">@KazumaNishihata</a>

次のコードでtwttrFloatTipを実行すればユーザー情報が表示されるようになります。

jQuery(function($){
	$('a.tw').twttrFloatTip();
});