Define the title hint ToolTip for the a tag in HTML

Source: Internet
Author: User

Define the title hint of the A tag in HTML for a brief description of the ToolTip
Create your own defined A-label title hint with a simple jquery+css. Used to replace 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 > 200?)

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 to avoid using images.

Not a master of CSS, it took some time to pull up this style, assuming someone can use it, that's my pleasure. :)


Define the title hint ToolTip for the a tag in HTML

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.