PoshyTip 是JQuery中一款文本提示插件，在Jsp頁面使用相當方便，插件內包含了很多外觀樣式，可以作為FormTooltips使用。
插件包下載地址：http://vadikom.com/files/?file=poshytip/poshytip-1.2.zip
PoshyTip Demo地址：http://vadikom.com/demos/poshytip/
下載好插件包后，解壓可看到目錄中有自定義樣式，我們把這些樣式引入頁面中就可以使用了，如圖
第一步：將整個文件夾引入到你的js文件夾內（個人覺得不需要這么多，你需要哪個樣式就引入哪個，但是有兩個主文件必須引入，下一步再說）；
第二步：在JSP頁面引入poshiytip的關鍵代碼：
<head id="head" runat="server"> <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/poshytip/tip-yellowsimple/tip-yellowsimple.css" />
//這兩個必須引入 <script type="text/javascript" src="<%=request.getContextPath()%>/js/poshytip/jquery.poshytip.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(function () { $('#demo-tip-yellowsimple').poshytip({ className: 'tip-yellowsimple',
content:'[title]', showTimeout: 1, alignTo: 'target', alignX: 'center', offsetY: 5, allowTipHover: false }); }); </script> </head>
執行效果如圖：
示例：在個人的使用中出現了要顯示一個小提示頁面的功能，要在不同的位置循環顯示，就不可能去挨個title里面寫內容，就在content里面寫元素內容完全沒有顯示，后來發現是content內寫組合元素內容不能分行
效果如圖：
代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>tips 信息提示</title> </head> <body > <link rel="stylesheet" href="<%=request.getContextPath()%>/js/poshytip-1.1/tip-yellow/tip-yellow.css" type="text/css" /> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/poshytip-1.1/jquery.poshytip.js"></script> <script type="text/javascript"> $(function () { for(var i=1;i<4;i++){ $('#demo-tip-yellow'+i).poshytip({ className: 'tip-yellow', content:'<div style="color:#636363 "> <strong>1.PoshyTip：</strong>文本提示信息<br/>
<table frame="box" style="border-collapse:collapse" border="1">
<tbody><tr align="center"><td >content</td><td>提示氣泡里面顯示的內容</td></tr>
<tr align="center"><td >className</td><td>指定的tips class樣式</td></tr> </div> ',
//此處寫content提示信息內容不能分行，要在一行寫，不然不能顯示出來 showOn: 'hover', alignY: 'bottom', showTimeout: 50, }); } }); </script> <p><a id="demo-tip-yellow1" href="#">.demo-tip-yellow1</a></p> <p><a id="demo-tip-yellow2" href="#">.demo-tip-yellow2</a></p> <p><a id="demo-tip-yellow3" href="#">.demo-tip-yellow3</a></p> </body> </html>
最后來總結一下它的屬性：
className: 'tip-yellowsimple' //指定的tips class樣式，包里面已經有自定義樣式 content：'[title]' // 提示氣泡里面顯示的內容,默認為元素的標題，可以是指定的字符串、元素、回調函數、jquery對象 bgImageFrameSize:10, //按照像素計算背景圖片和顯示內容的內邊距 showTimeout:500, // 延時多久開始顯示（1000 == 1 second） hideTimeout:100, // 延時多久開始隱藏 timeOnScreen:0, // 自動隱藏之前延時多久 showOn:'hover', //顯示方式 支持'hover'鼠標划入、'focus' 獲取焦點、'none'手動顯式調用 liveEvents:false, // 支持live 事件 同樣可以對未來元素進行影響 alignTo:'cursor', // 和誰進行對齊 ('cursor' 鼠標, 'target' 目標元素) alignX:'right', // 水平方向對齊方式 可選參數：'right', 'center', 'left', 'inner-left', 'inner-right' ，如果 alignTo:'target' ,無效 alignY:'top', // 垂直方向對齊方式 可選參數：'bottom', 'center', 'top', 'inner-bottom', 'inner-top' ，如果 alignTo:'target' ,無效 offsetX:-22, // 水平偏移量，如果alignX:'center',無效 offsetY:18, // 垂直方向偏移量，如果alignX:'center',無效 allowTipHover:true, //hover顯示方式下，允許鼠標離開元素仍然顯示提示信息 followCursor:false, // 提示信息隨着鼠標移動 只在滿足hover顯示方式下，對齊方式為alignTo:'cursor' 才有效 fade:true, // 使用動畫 slide:true, // 使用slie效果 slideOffset:8,// slide 動畫的偏移量 showAniDuration:300, // 動畫顯示的時間間隔 如果不想動畫效果，設置為0即可 hideAniDuration:300 // 動畫隱藏的時間間隔 如果不想動畫效果，設置為0即可