jqueryでAmazon商品情報をツールチップ風に表示

↓カーソルを乗せるとツールチップ風の小窓が表示されます。

JavaScript 第5版　jqueryドーナツ本　iPad2　アビイ・ロード

まずはphp側で、こんな風にtip=1がある場合は画像とタイトルだけを出力するようにします。
http://kawama.jp/php/amazon_products/?asin=4048684116&tip=1

そしてjqueryのhoverを使い、mouseover時にajaxで上記のデータを取得し、DOMに追加。
mouseoutの時にはDOMから削除します。

マウスオーバーのたびに$.getでデータを取得するのは無駄なので、キャッシュするようにしてみました。

//Amazon商品情報のチップを表示
var amazonProductsTip = function() {
var apt_cache = [];
$('a[href^=http://kawama.jp/php/amazon_products/?asin=], #amazon_products_tip').hover(
function(e){
e.stopImmediatePropagation();
var $this = $(this), $index = $this.index();
$(this).append('<div id="amazon_products_tip"></div>');
$('#amazon_products_tip').css({'padding-bottom':'5px', 'left':$this.offset().left+10+'px', 'top':$this.offset().top+12+'px'});
if(!apt_cache[$index]){ 
$.get($this.attr('href')+'&tip=1', function(data){ 
$('#amazon_products_tip').append(data);
apt_cache[$index] = data;
});
} else { 
$('#amazon_products_tip').append(apt_cache[$index]);
}
},
function(e){ 
e.stopImmediatePropagation();
$('#amazon_products_tip').remove();
}
);
}();

意外とあっさり実装できました。
なんか落とし穴がありそうな気がしますが、ひとまずここまでにしておきます。