I think the Tips of pure CSS is a bit large, and it seems that compatibility is not good. This is a link prompt box effect of JS+CSS I found. It will also move with the mouse, and the compatibility is good. The code and everyone share:front -end sharing
<! Doctype html public "-// W3C // dtd xhtml 1.0 transitional // en" http://www.w3.org/tr/xhtml1/dtdml1-transitational.dtddd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title> Following the text prompt box of the mouse </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-design: underline;}
.tip {width: 200px; border: 2px solid #ddd; padding: 8px; background:#f1f1f1f1f1f1f1f1f1f1f1f1f1f1f1f1f1f1f1f1f1f1f1f1F1F1F1F1
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.documentlement.scroltop};
},
Start: Function (obj) {
var seelf = this;
var t = seld. $ ("mjs: tip");
obj.οnmeusemοve = 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.οnmοuseοut = Function () {
t.style.display = 'None';
};
}
}
</script>
</head>
<body>
<OL>
<li> <a href = "#" target = "_ blank" οnmοuseοver = "tip.start (this)" tips = "December 14, 2013, Chang'e No. 3 satellite ascended the moon, and everything was finally coming. ... "> Some feelings of Chinese Chang'e flying sky </a> </li>
<li> <a href="#" target="_blank" οnmοuseοver="tip.start (this)" tips="Orban is the strongest country in the world in the future, do you believe it ?"> China is the world in the world The most powerful country </a> </li>
</OL>
<div ID = "mjs: tip" class = "tip" style = "posity: absolute; left: 0; top: 0; dislay: none;"> </div>
</body>
</html>
is to add a TIPS tag to each A tag and display it with JS, so before your page is added to this link prompt, please copy the JavaScript code in the code to your page Add TIPS tags.front -end framework sharing