Baby from Mike.Code, The effect is good. I used pure CSS tips before, but the limit is quite large. This is quite good!
Effect
The Code is as follows:
<! 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>
<Title> mouse following prompt box </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Style type = "text/CSS">
Body {Font: 12px/1.8 Arial ;}
A, A: visited {color: # 3366cc; text-Decoration: none ;}
A: hover {color: # f60; text-Decoration: underline ;}
. Tip {width: 200px; Border: 2px solid # DDD; padding: 8px; Background: # f1f1f1; color: #666 ;}
IMG {border: none ;}
</Style>
<SCRIPT type = "text/JavaScript">
VaR tip = {$: function (Ele ){
If (typeof (Ele) = "object ")
Return ele;
Else if (typeof (Ele) = "string" | typeof (Ele) = "Number ")
Return document. getelementbyid (Ele. tostring ());
Return NULL;
},
Mousepos: function (e ){
VaR X, Y;
VaR E = E | window. event;
Return {X: e.clientx?document.body.scrollleft?document.doc umentelement. scrollleft,
Y: e.clienty?document.body.scrolltop=document.doc umentelement. scrolltop };
},
Start: function (OBJ ){
VaR self = this;
VaR T = self. $ ("MJS: tip ");
OBJ. onmousemove = function (e ){
VaR mouse = self. mousepos (E );
T. style. Left = mouse. x + 10 + 'px ';
T. style. Top = mouse. Y + 10 + 'px ';
T. innerhtml = obj. getattribute ("Tips ");
T. style. Display = '';
};
OBJ. onmouseout = function (){
T. style. Display = 'none ';
};
}
}
</SCRIPT>
</Head>
<Body>
<Ol>
<Li>
<A href = "#" target = "_ blank"> </a>
</LI>
<Li>
<A href = "#" target = "_ blank" onmouseover = "tip. start (this) "Tips =" in May, I had the honor to attend the UCD Hangzhou book club in May and share my feelings with you ...... "> Thoughts on User Research </a>
</LI>
<Li>
<A href = "#" target = "_ blank" onmouseover = "tip. start (this) "Tips =" in the morning, the city was crowded, so it was terrible. A fierce man shouted, "I am a display: Block", and this line of Lao Tzu exclusive ...... "> Web refactoring </a>
</LI>
</OL>
<Div id = "MJS: tip" class = "tip" style = "position: absolute; left: 0; top: 0; display: none;"> </div>
</Body>
</Html>
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
