Feel that pure CSS tips limited a little bit, and as if compatibility is not good, this is I found a js+css link prompt box effect, but also follow the mouse and move, and compatibility is good, the code share with you: front-end sharing
. Code
- <! DOCTYPE HTML public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">
- "http://www.w3.org/1999/xhtml">
- <title> follow the mouse text 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;p adding: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.documentelement.scrollleft,
- Y:e.clienty+document.body.scrolltop+document.documentelement.scrolltop};
- },
- Start:function (obj) {
- var = this;
- var t = self.$ ("Mjs:tip");
- Obj.onmousemove=function (e) {
- var mouse = Self.mousepos (e);
- T.style.left = mouse.x + + ' px ';
- T.style.top = mouse.y + + ' px ';
- t.innerhtml = Obj.getattribute ("Tips");
- T.style.display = ";
- };
- Obj.onmouseout=function () {
- T.style.display = ' None ';
- };
- }
- }
- </script>
- <body>
- <ol>
- <li><a href="#" target="_blank" onmouseover= "Tip.start(This)" tips=" December 14, 2013, the Chang ' E 3rd satellite landed on the moon, all the excitement finally arrived ... "> Some thoughts on the flying of Chang ' E in China </a></li>
- <li><a href="#" target="_blank" onmouseover= "Tip.start(This)" tips=" China's future must be the most powerful country in the world, do you believe it? "> China is the most powerful country in the world </a></li>
- </ol>
- <div id="Mjs:tip" class="Tip" style="Position:absolute;left:0;top:0;display:none;" ></div>
- </body>
This is to add a tips label for each a tag, which is displayed with JS control, so before you add this link hint to your page, copy the JavaScript code from the code to your page, and then add the Tips tab for the link that needs to be prompted. Front-end framework sharing
