Let's take a look at Google's Smart Tips,
First, we can see that there are three files. The test.htm file is the test file, and the css.css style list. google. js is the js processing file. I will write the code one by one and share it with you.
Test.html
<! 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> Untitled Page </title>
<Link href = "tooltip.css" rel = "stylesheet" type = "text/css"/>
<Script src = "tooltip. js" language = "javascript"> </script>
<Script language = "javascript">
Function test ()
{
Var obj = document. getElementById ("msg ");
Obj. innerText = "test successful ";
}
Function ShowWin ()
{
Var pop = window. createPopup ();
Var doc = pop.doc ument;
Var body = doc. body;
Doc. createStyleSheet ("tooltip.css ");
Body. innerHTML = document. getElementById ("list"). outerHTML;
Pop. show (100,100,200,200, document. body );
}
</Script>
</Head>
<Body>
<Span id = "msg"> </span>
<Input type = "text" onkeyup = "GTTa. OnKeyUp (this);" style = "width: 200px;"/>
<Input type = "button" value = "test" onclick = "ShowWin ()"/>
<Script language = "javascript">
Var GTTa = new AIToolTip ();
</Script>
<Div class = "tooltip" style = "display: none;">
<A href = "#"> 1 </a>
</Div>
</Body>
</Html>
The code of the test file is simply copied and saved as an html file.
The following describes the content of the css file:
. Body
{
Margin: 0px;
}
. Tooltip
{
Border-right: black 1px solid;
Border-top: black 1px solid;
Font-size: 9pt;
Border-left: black 1px solid;
Border-bottom: black 1px solid;
Font-family:;
Background-color: white;
Position: absolute;
Z-index: 10;
Width: 100%;
}
. Tooltip
{
Display: block;
Padding-top: 5px;
Padding-left: 5px;
Text-decoration: none;
Color: black;
Cursor: hand;
Width: 99%;
}
. Tooltip a: hover
{
Display: block;
Padding-top: 5px;
Padding-left: 5px;
Color: # ffffff;
Background-color: blue;
Text-decoration: none;
}
I have nothing to say above. If you don't understand it, go to http://www.111cn.cn/cssdiv/css.htmlto view it.
The final part is the js file code.
Function AIToolTip () {this. keyList = new Array (); this. currentSelectedItem = null; this. input = null; this. index =-1; this. length = 0; this. qurl = "data_format.htm"; this. hasFocus = false; this. div = document. createElement ("DIV"); this. div. className = "tooltip"; this. div. attachEvent ("onmouseout", this. div_OnMouseOut); this. div. attachEvent ("onmouseover", this. div_OnMouseOver); document. body. appendChild (this. div); AIToolTip. prototype. p = this ;}
Function AIToolTipItem (t, u, c) {this. text = t; this. url = u; this. count = c ;}
AIToolTip. prototype. OnKeyUp = function (o) {var p = AIToolTip. prototype. p; this. input = o; if (! O. getAttribute ("hasTip") {o. setAttribute ("hasTip", true); o. attachEvent ("onblur", this. input_OnBlur);} switch (event. keyCode) {case 38: this. previous (); break; case 40: this. next (); break; case 37: case 39: break; case 13: p. enterKey (); break; default: this. getValues ();}}
AIToolTip. prototype. EnterKey = function () {if (this. currentSelectedItem! = Null) {this. input. value = this. currentSelectedItem. innerText;} this. Hide ();}
AIToolTip. prototype. show = function () {var tip = this. div. style; var mo = this. input; var top = mo. offsetTop; var hei = mo. clientHeight; var left = mo. offsetLeft; while (mo = mo. offsetParent) {top + = mo. offsetTop; left + = mo. offsetLeft;} tip. top = top + 20; tip. left = left; tip. display = ""; this. div. style. posWidth = this. input. offsetWidth ;}
AIToolTip. prototype. Hide = function () {this. div. style. display = "none ";}
AIToolTip. prototype. Input_OnBlur = function () {var p = AIToolTip. prototype. p; if (p. hasFocus) {} else {p. Hide ();}}
AIToolTip. prototype. Div_OnMouseOut = function () {var p = AIToolTip. prototype. p; p. hasFocus = false ;}
AIToolTip. prototype. Div_OnMouseOver = function () {var p = AIToolTip. prototype. p; p. hasFocus = true ;}
AIToolTip. prototype. A_MouseMove = function () {var obj = event. srcElement; var p = AIToolTip. prototype. p; if (p. currentSelectedItem! = Null) {p. unSelectItem (p. currentSelectedItem);} p. selectItem (obj); p. input. value = obj. innerText; p. index = obj. getAttribute ("index"); p. currentSelectedItem = obj ;}
AIToolTip. prototype. A_MouseOut = function () {var obj = event. srcElement; var p = AIToolTip. prototype. p; p. currentSelectedItem = obj ;}
AIToolTip. prototype. a_OnClick = function () {var obj = event. srcElement; var p = AIToolTip. prototype. p; p. input. value = obj. innerText; p. hide ();}
AIToolTip. prototype. selectItem = function (obj) {obj. style. backgroundColor = "blue"; obj. style. color = "# ffffff"; this. index = obj. getAttribute ("index"); this. currentSelectedItem = obj ;}
AIToolTip. prototype. UnSelectItem = function (obj) {obj. style. backgroundColor = ""; obj. style. color = "";}
AIToolTip. prototype. Previous = function () {this. index> 0? This. index --: 0; if (this. currentSelectedItem! = Null) {this. unSelectItem (this. currentSelectedItem);} this. selectItem (this. div. childNodes (this. index); this. currentSelectedItem = this. div. childNodes (this. index); this. input. value = this. div. childNodes (this. index ). innerText ;}
AIToolTip. prototype. Next = function () {this. index <this. length-1? This. index ++: 0; if (this. currentSelectedItem! = Null) {this. unSelectItem (this. currentSelectedItem);} this. selectItem (this. div. childNodes (this. index); this. currentSelectedItem = this. div. childNodes (this. index); this. input. value = this. div. childNodes (this. index ). innerText ;}
AIToolTip. prototype. addItem = function (text, total) {var a = document. createElement ("A");. innerText = text;. attachEvent ("onmousemove", this. a_MouseMove);. attachEvent ("onmouseout", this. a_MouseOut);. attachEvent ("onclick", this. a_OnClick);. setAttribute ("index", this. length); this. keyList. push (text); this. div. appendChild (a); this. length ++ ;}
AIToolTip. prototype. search = function (k) {var a, B; for (var I = 0; I <this. length; I ++) {a = k. toLowerCase (); B = this. keyList [I]. toLowerCase (); if (B. indexOf (a, 0 )! =-1) {if (this. currentSelectedItem! = Null) {this. unSelectItem (this. currentSelectedItem);} var obj = this. div. childNodes (I); this. selectItem (obj); this. div. style. display = ""; return ;}}}
AIToolTip. prototype. clearAll = function () {this. div. innerHTML = ""; this. index =-1; this. length = 0; while (this. keyList. pop ()! = Undefined ){}}
AIToolTip. prototype. getValues = function () {var exp =/\ S/; if (exp. test (this. input. value) {if (this. length> 0) {this. search (this. input. value);} else {this. getValuesFromUrl () ;}} else {this. hide ();}}
AIToolTip. prototype. GetValuesFromUrl = function ()
{This. clearAll (); var p = AIToolTip. prototype. p; var ajax = new ActiveXObject ("Msxml2.XMLHTTP. 3.0 "); ajax. open ("GET", this. qurl, true );
Ajax. onreadystatechange = function () {if (ajax. readyState = 4) {var it; eval (ajax. responseText); var I, l; for (I = 0, l = list. length; I <l; ++ I) {p. addItem (list [I]. text, list [I]. count);} p. show ();}}
Ajax. send ();
}
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
