Posted on 2013-06-26 21:02
張力 閱讀(132)
評論(0) 編輯 收藏
上圖
代碼
CSS：
.tooltip {
position: absolute;
display: none;
z-index: 9900000;
outline: none;
padding: 5px;
border-width: 1px;
border-style: solid;
border-radius: 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background-color: #FFFFCC;
border-color: #CC9933;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border-style: solid;
border-width: 6px;
border-color: transparent;
_border-color: tomato;
_filter: chroma(color=tomato);
border-right-color:#FFFFCC;
}
.tooltip-right .tooltip-arrow {
left: 0;
top: 50%;
margin: -6px 0 0 -12px;
}
.tooltip-content {
font-size: 12px;
}
JS代碼：
/**
* 通用消息提示框
* @author 張力
* 示例：tip.show(this,"消息");tip.hide(this);
*/
var tip={
'show':function(jq,msg){
var box = $(jq);
$("<div class=\"tooltip tooltip-right\" id=\"tip\" tabindex=\"-1\" >"
+"<div class=\"tooltip-content\">"+msg+"</div>"
+"<div class=\"tooltip-arrow\"></div>"
+"</div>").appendTo("body");
var tip = $("#tip");
$(".validatebox-tip-content").html(msg);
tip.css( {
display : "block",
left : box.offset().left + box.outerWidth()+5,
top : box.offset().top,
});
},
'hide':function(jq){
var tip = $("#tip");
if (tip) {
tip.remove();
}
}
};
示例
<img src="${pageContext.request.contextPath}/css/themes/default/images/validatebox_warning.png" onmouseover="tip.show(this,'${item.errorMsg}')" onmouseout="tip.hide()"/>