Tip: You can modify some of the code before running
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>tips, with triangle-closed text hints </title> </pead> <body> <style type=" Text/css "> body{font-size:12px; Lj-tipswrap,.lj-in,.lj-close{display:inline-block;} . Lj-tipswrap{background: #F4FBFF; line-height:1.5em;padding:5px 15px;border:1px solid #2192D3;p Osition:absolute; Text-align:left;} . lj-in{position:absolute;zoom:1;border:10px dashed transparent;width:0px;height:0px; . lj-in Span{zoom:1;width:0px;height:0px;overflow:hidden;} Lj-close{position:absolute text-decoration:none;color: #000; font-size:14px; height:9px; width:9px; overflow: Hidden;line-height:0.5em; right:0; top:0;} . Lj-close:hover{color: #39F;} . lj-top{border-top:10px solid #2192D3; bottom:-20px; left:3px;} . Lj-top span{border-top:10px solid #F4FBFF margin:-11px 0 0-10px;} . lj-right{border-right:10px solid #2192D3; left:-20px; top:3px;} . lj-right span{border-right:10px solid #F4FBFF; margin:-10px 0 0-9px;} . lj-bottom{border-bottom:10px solid #2192D3; top:-20px; left:3px;} . lj-bottom span{border-bottom:10px solid #F4FBFF; margin:-9px 0 0-10px;} . lj-left{border-left:10px solid #2192D3; right:-20px; top:3px;} . lj-left span{border-left:10px solid #F4FBFF; margin:-10px 0 0-11px;} . lj-left ~. lj-close{left:0;} /*CSS 3 Progressive Enhancement */lj-tipswrap{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:2px 2px 3px #eee;- moz-box-shadow:2px 2px 3px #eee;} </style> <script type= "Text/javascript" > Window.ljtips=function () {var i=document.body,j= Document.documentelement,n=/msies ([D.] +)/.test (Navigator.userAgent.toLowerCase ()), K=window;return function (l) {var c=l?typeof l== "string"? document.getElementById (L): L:this,d=null,s=c.offsetwidth,t=c.offsetheight,m=0,g=null,e={},o={left:function (a) { Return{tOp:d.top,left:d.left-a-15}},top:function (a,h) {return{top:d.top-h-15,left:d.left}},right:function () {return{top: D.top,left:d.left+s+15}},bottom:function () {return{top:d.top+t+15,left:d.left}}};e.show= function (a) {if (C.lock) C.lock=false;else{c.lock=true;d=c.getboundingclientrect (); var h=i.scrolltop+j.scrolltop,f=i.scrollleft+ j.scrollleft;a.p=a.p| | " Right "; var b=e.append (a.p,a.closebtn| | FALSE); B.getelementsbytagname ("DIV") [0].innerhtml=a.content;var P=O[A.P] (b.offsetwidth,b.offsetheight); b.style.top=p.top+h+ "px"; b.style.left=p.left+f+ "px"; a.time&&settimeout (function () {E.clear ( document.getElementById ("LJ" +m)},a.time); A.fn&&a.fn.call (C,document.getelementbyid ("LJ" +m)); g= function (w,q) {return function () {var u= i.scrolltop+j.scrolltop,v=i.scrollleft+j.scrollleft;d= C.getboundingclientrect (); var r=o[a.p] (b.offsetwidth,b.offsetheight); q.style.top=r.top+u+ "px"; q.style.left= r.left+v+ "px"}} (C,b); N?k.attachevent ("OnResize", g): K.addeventlistener ("resize", G,false)}};e.append=function (A,h) {var f=m=math.floor (Math.random () *1e4), B=document.createelement ("DIV"); b.id= "LJ" +f;b.innerhtml= ' <div class= "Lj-tipswrap" id= "tipswrap-<%=r%>" ><div></div><span class= "lj-in lj-<%=p%>" >< Span class= "lj-in" ></span></span> "class=" Lj-close ">x</div>" replace ("<%=p%>", a). Replace (/<%=r%>/g,f);d ocument.body.appendChild (b); if (h) document.getElementById ("Ljclose" +f). onclick= E.hide;else document.getElementById ("Ljclose" +f). style.display= "None"; return document.getElementById ("tipsWrap-" +F)};e.clear=function (a) {a&&a.parentnode&&a.parentnode.removechild (a); N?k.detachEvent (" OnResize ", g): K.removeeventlistener (" resize ", G,false); C.lock=false};e.hide=function () {e.clear ( document.getElementById ("LJ" +m))};return e}} (); </script> <!--Here is no compressed code window.ljtips = function () {var html = "<div class=" Lj-tipswrap "id=" tipswrap-<% =r%> "> <div></div> <span class=" Lj-in lj-<%=p%> "><span class= "lj-in" ></span></span> "class=" Lj-close ">x </div>"; var DG = function (ID) {return document.getElementById (ID);}; var dt = function (parent, nodename) {return parent.getelementsbytagname (nodename);}; var db = document.body; var dd = document.documentelement; var of = 15;//offset var prefix = ' LJ ';//prefix var isie =/msies ([D.] +)/.test (Navigator.userAgent.toLowerCase ()); var w = window; var lock = true;//Lock the same object multiple pop-up prompts return function (ID) {var elem = id? typeof id = = "string"? DG (ID): id:this; var offset = null; var width = elem.offsetwidth; var height = elem.offsetheight; var rand = 0;//value var func = null;//window change bound function var _this = {}; var pos = {left:function (W, h) {return {top:offset.top, left:offset.left-w-to}}, Top:function (W, h) {return {top : Offset.top-h-OF, Left:offset.left}}, Right:function (W, h) {return {top:offset.top, Left:offset.left + width + of}} , Bottom:function (W, h) {return {top:offset.top + Height + of, Left:offset.left}}}; _this.show = function (obj) {if (elem.lock) {Elem.lock=false;return; }else elem.lock=true; offset = Elem.getboundingclientrect (); var top = db.scrolltop + dd.scrolltop; var left= db.scrollleft + dd.scrollleft; OBJ.P = OBJ.P | | ' Right '; var wrap = _this.append (OBJ.P, OBJ.CLOSEBTN | | false); DT (Wrap, "DIV") [0].innerhtml = Obj.content; var p = pos[obj.p] (wrap.offsetwidth,wrap.offsetheight); Wrap.style.top = p.top + top + "px"; Wrap.style.left = P.left + left + "px"; Obj.time && settimeout (function () {_this.clear (DG (Prefix+rand));}, Obj.time); Obj.fn && Obj.fn.call (Elem, DG (Prefix+rand)); --detection window changes func = function (A, b) {return function () {var top = db.scrolltop + dd.scrolltop; var left= db.scrollleft + dd.scrollleft; offset = Elem.getboundingclientrect (); var C = pos[obj.p] (wrap.offsetwidth, wrap.offsetheight); B.style.top = c.top + top + ' px '; B.style.left = C.left + left + ' px '; } (Elem, wrap); Isie? W.Attachevent (' onresize ', func): W.addeventlistener (' Resize ', Func, false); } _this.append = function (p,closebtn) {var r = Rand = Math.floor (math.random () * 10000); var x = document.createelement ("DIV"); x.id = prefix + R; x.innerhtml = Html.replace ("<%=p%>", p). replace (/<%=R%>/G,R); Document.body.appendChild (x); if (CLOSEBTN) {DG ("Ljclose" +r). onclick = _this.hide; }else{DG ("Ljclose" +r). Style.display = "None"; Return DG ("tipswrap-" + R); } _this.clear = function (a) {a && a.parentnode && a.parentnode.removechild (a); Isie? W.detachevent (' onresize ', func): W.removeeventlistener (' Resize ', Func, false); Elem.lock = false;//unlock} _this.hide = function () {_this.clear (DG (prefix + rand)); return _this; } }(); --> <p> Please click the text with box below </p> <span id= "Test1" > See me here a div</span><br> <input value= "Click Me" id= "test2" ><br> <span id= "test3" > hints appear under me </span><br> <span id= "TeSt4 "> prompt appears on the left </span><br> <span id=" Test5 "> prompts will automatically disappear after 2 seconds. </span><br> <span id=" TEST6 "> Hint can have close button </span><br> <div > <span id=" test7 "> Different worry page Zoom out will be offset oh </span>< br> </div> <p> Benefits </p> <ul> <li>1: Compatible with various browsers </li> <li>2: self-defined tips style (color), CS S3 Progressive Enhancement </li> <li>3: Multi-direction pop-up prompts </li> <li>4: pure css+javascript (without any pictures) </li> <li> 5: Volume Super small css+js = 3k</li> </ul> <p> parameter configuration </p> <ul> <li>ljtips (object). Show (JSON) &L T;/li> <li>object:dom Object ID (test1), Dom object </li> <li><pre> json:{content: Hint message contents (required), P: Hint box bit (optional value top left bottom right), default to right (optional), CLOSEBTN: whether there is a close button (true false) default value (FALSE) (optional), time: How many milliseconds the balloon disappears (optional)} </PRE&G t;</li> </ul> <p> Usage notes </p> <ul> <li> Main method. Show ();. hide ();. Clear (); Generally you only need to use show,hide;</li> <li> use 1</li>;li> first instantiate a ljtips (Var tips=ljtips (' test1 ')); Then use Tips.show (JSON) </li> <li> use 2</li> <li> invoke the Prompt box "<div onclick=" ljtips (this) in a row. Show ( JSON); "></div>" </li> <li> use 3</li> <li> to call document.getElementById ("Test6") in JS. onmouseover = function () {ljtips (this). Show ({content:) You can't turn it off! No Close button! ", P: ' Right '}"};</li> </ul> <script type= "Text/javascript" > var test1 = ljtips (' test1 '); document.getElementById ("Test1"). onmouseover = function () {test1.show ({content: "The tips...<br> compatible with the mouse across the mainstream browser IE 6 7 8 Chorme Firefox Opera Safari "}"}; document.getElementById ("Test1"). onmouseout = function () {test1.hide ();}; document.getElementById ("Test2"). onfocus = function () {ljtips (this). Show ({content: "The hint will be above the <br>input!). There is a close button Oh ", p: ' Top ', Closebtn:true})}; document.getElementById ("Test3"). onmouseover = function () {ljtips (this). Show ({content: "I appeared below!) Do not think that will use the picture Oh! ", p: ' Bottom ', closebtn:true})}; document.getElementById ("Test4"). OnmouSeover = function () {ljtips (this). Show ({content: I can in 4 directions, p: ' Left ', Closebtn:true})}; document.getElementById ("Test5"). onmouseover = function () {ljtips (this). Show ({content: "The prompt will automatically disappear after 2 seconds", p: ' Bottom ', time:2000})}; document.getElementById ("Test6"). onmouseover = function () {ljtips (this). Show ({content: "The box you can't turn off!") No Close button! ", P: ' Right '})}; document.getElementById ("Test7"). onmouseover = function () {ljtips (this). Show ({content: "You can enlarge or shrink the browser window!) <br> He will follow this absolute position, there will be no slightest deviation. ", P: ' Right ', closebtn:true})}; </script> </body> </ptml>
Tip: You can modify some of the code before running
