jquery 彈表單提示效果代碼

jquery 彈表單提示效果代碼這種效果其實也叫標題 tips教程效果很多時候是在表單或者文本輸入框有這樣的提示了下面我們提供了下效果圖

<style type="text/css教程">
focus
{
border: px solid #fc !important;
background: url(admin/images/focus_bgjpg) repeatx !important;
color: #f !important;
}
/*提示文字樣式*/
#hintmsg
{
width: px;
position: absolute;
display: none;
}
#hintmsg hinttop
{
height: px;
background: url(admin/images/hintbggif) norepeat;
overflow: hidden;
}
#hintmsg hintinfo
{
padding: px;
borderleft: px solid #;
borderright: px solid #;
background: #ffffe;
lineheight: em;
}
#hintmsg hintinfo b
{
display: block;
marginbottom: px;
paddingleft: px;
background: url(admin/images/hintgif) left center norepeat;
height: px;
lineheight: px;
}
#hintmsg hintinfo b span
{
display: block;
float: right;
textindent: px;
background: url(admin/images/closegif) norepeat;
width: px;
height: px;
cursor: pointer;
}
#hintmsg hintfooter
{
height: px;
background: url(admin/images/hintbggif) norepeat;
}
</style>

<script>
$(function() {
$("inputlogin_input動畫
$("#hintmsg")remove(); //先清除防止重復出錯
var hinthtml = "<ul id="hintmsg"><li class="hinttop"></li><li class="hintinfo"><b>" + $(this)attr("hinttitle") + "</b>" + $(this)attr("hintinfo") + "</li><li class="hintfooter"></li></ul>"; //設置顯示的內容
var offset = $(this)offset(); //取得事件對象的位置
$("body")append(hinthtml); //添加節點
$("#hintmsg")fadeto( ); //對象的透明度
var hintheight = $("#hintmsg")height(); //取得容器高度
$("#hintmsg")css({ "top": offsettop hintheight + "px" "left": offsetleft + "px" })fadein();
})blur(function(event) {
$("#hintmsg")remove(); //刪除ul
});
});
</script>
<form id="form" runat="server">
<div>
<div style="margintop:px">
<asp教程:textbox id="textbox" runat="server" hinttitle="增加的內容信息標題" hintinfo="控制在個字數內標題文本盡量不要太長"></asp:textbox></div>
</div>
</form>

From:http://tw.wingwit.com/Article/program/Java/hx/201405/30805.html