Define the title hint of the A tag in HTML for a brief description of the ToolTip
Create your own defined a tag title hint with a simple jquery+css to replace the browser default behavior.
JavaScript code
$ (function () {$ ("a[title]"). each (function () {var a = $ (this); var title = a.attr (' title '); if (title = = Undefined | | title = = "") return; A.data (' title ', title). Removeattr (' title '). Hover (function () { var offset = A.offset (); var awidth = A.outerwidth (); var aheight = A.outerheight (); var left = Offset.left + a.outerwidth () + 1; var top = offset.top + Aheight + 10; var maxtop = $ (document). Outerheight () + $ (document). ScrollTop ()-54; top = top > Maxtop?Maxtop:top; if (Left > window.innerwidth-awidth) {left = Offset.left + (awidth > AWIDTH/2:0) ; } $ ("<div id=\" Anchortitlecontainer\ "></div>"). AppendTo ($ ("body")). HTML (title). CSS ({top:top , Left:left}). FadeIn (function () {var pop = $ (this); SetTimeout (function () {pop.remove ();}, Pop.text (). length*80); }); }, Function () {$ ("#anchortitlecontainer"). Remove (); ); });});
(Last update 2014/5/27)
Don't forget to quote jquery.
The code in settimeout (function () {pop.remove ();}, Pop.text (). length*80) is calculated based on the title length to prevent too short a title hint too long or too long for the title hint too short.
CSS Code
#anchortitlecontainer { position:absolute; z-index:5999; Border:solid 1px #315B6C; padding:5px; Color: #315B6C; Background:none Repeat scroll 0 0 #FFFFFF; border-radius:5px; Display:none;} #anchortitlecontainer: before { position:absolute; Bottom:auto; Left: -1px; Top: -15px; Border-color:transparent transparent transparent #315B6C; Border-style:solid; border-width:15px; Content: ""; Display:block; width:0;} #anchortitlecontainer: after { position:absolute; Bottom:auto; left:0px; Top: -13px; Border-color:transparent transparent transparent #FFFFFF; Border-style:solid; border-width:15px; Content: ""; Display:block; width:0;}
Use some of the CSS3 features. Avoid using pictures.
Not a master of CSS. It took some time to pull up this style. If anyone can use it, it's my pleasure. :)
Define the title ToolTip for the A tag in HTML itself