Jquery tooltip

最近做了一個功能，如圖
利用Jquery的Plugin(qTip)，應用在系統上，功能是按下交易類別的欄位會去取資料(利用ajax)，透過小div顯示(術語叫tooltip)，一般都是用滑鼠滑過就會出現，但我這次是要按下才會顯示，避免不經意的滑過也會去撈資料。

step 1 :
< script type="text/javascript" src="${scripts}/jquery.js" >< /script >
< script type="text/javascript" src="${scripts}/jquery.qtip-1.0.0-rc3.js" >< /script >

step 2 :
$(document).ready(function(){

$("a[href$='ABC']").each(function(){

$(this).qtip({
content: { url: 'ajax.do', data: { id: $(this).attr("rel")}, method: 'get' },
show: { when: { event: 'click' } },
hide: 'mouseout',
style: {
width: 70,
padding: 0,
background: '#A2D959',
color: 'black',
textAlign: 'left',
border: {
width: 7,
radius: 5,
color: '#A2D959'
},
tip: 'topLeft'
}

})


})
});
</script>

step 3 :
table部份，只要是a href的值是以ABC結尾都套用這個tooltip
...
<c :when test="${s.bonusCatVO == '88888888' }">
< a href="#ABC" rel="${s.cateDetail}" >包月消費< /a >
</ c:when>
...

step 4 : ajax.do

String appId = request.getParameter("id");
AppVO app = pointFacade.getApp(appId);
if(app!=null){
String appName = app.getAppname();
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
out.println(appName);
out.close();
}