標籤：from str top doctype class border string content dex
記錄下，以備將來用到
<!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>無標題頁</title>
<script type=
"text/javascript"
src=
"jquery-1.4.2.min.js"
></script>
<script type=
"text/javascript"
>
function
ShowTip(event,obj,message)
{
var
xOffset = -10;
// x distance from mouse
var
yOffset = 10;
// y distance from mouse
//obj.style.top = (event.clientX + yOffset)+"px";
//obj.style.left = (event.clientY + xOffset)+"px";
//擷取元素width: $(obj).width();
//擷取元素height：$(obj).height()
//擷取元素位置：$(obj).position().top和$(obj).offset().top
$(
‘body‘
).append(
‘<div id="tipmessage">‘
+message+
‘</div>‘
);
$(
‘div#tipmessage‘
).css(
"top"
, $(obj).position().top+$(obj).height() +
"px"
).css(
"left"
, $(obj).position().left+
"px"
).fadeIn(
"slow"
);
}
function
HideTip()
{
$(
"div#tipmessage"
).fadeOut(
"slow"
).remove();
}
</script>
<style type=
"text/css"
>
#tipmessage
{
display:none;
z-index:1000;
border:1px solid
#448833;
position:absolute;
background:
#ffffff;
max-width:200px;
max-height:30px;
padding:5px 10px;
}
</style>
</head>
<body>
<a href=
"#"
onmouseover=
"ShowTip(event,this,‘歡迎訪問指令碼之家‘)"
onmouseout=
"HideTip()"
>Tip</a>
</body>
</html>
jQuery實現ToolTip元素定位顯示功能樣本
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
