How to Change the Style of <a> Tag Title Attribute ?
The style of <a> (anchor) tag title attribute is pre-defined for the browser and it may differ from one browser to the other. The webpage cannot display the changes in the tool-tip if based on the title attribute.
The option is to make a false-tool-tip using CSS properties according to the wish. For doing this, the data-title attribute must be used. The data-* attributes method is used to store custom data which is private to the page or application. There are various ways of accessing them which can be used by CSS.
Example 1: This example makes tool-tip bigger and with a different background color.
<!DOCTYPE html> < html > < head > < title > How to Change the Style of Anchor Tag Title Attribute? </ title > < style > [data-title]:hover:after { visibility: visible; } [data-title]:after { content: attr(data-title); background-color: #4b9c2c; color: #ffffff; font-size: 150%; position: absolute; padding: 4px 8px 4px 8px; visibility: hidden; } </ style > </ head > < body style = "text-align:center;" > < h1 style = "color:green" > GeeksforGeeks </ h1 > < h3 > Change the Style of Anchor Tag Title Attribute </ h3 > < a href = "geeksforgeeks.org" data-title = "GFG" > Link </ a > Title with different background color and style < br > < a href = "geeksforgeeks.org" title = "GFG" > Link </ a > Title with a normal tool-tip </ body > </ html > |
Output:
Example 2: The following example styles the tool-tip better than the last one using some better CSS properties.
<!DOCTYPE html> < html > < head > < title > How to Change the Style of Anchor Tag Title Attribute? </ title > < style > [data-title]:hover:after { opacity: 1; transition: all 0.2s ease 0.6s; visibility: visible; } [data-title]:after { content: attr(data-title); position: absolute; padding: 4px 8px 4px 8px; color: #222; border-radius: 5px; box-shadow: 0px 0px 15px #222; background-image: -webkit-linear-gradient( top, #f8f8f8, #cccccc); background-image: -moz-linear-gradient( top, #f8f8f8, #cccccc); background-image: -ms-linear-gradient( top, #f8f8f8, #cccccc); background-image: -o-linear-gradient( top, #f8f8f8, #cccccc); visibility: hidden; } </ style > </ head > < body style = "text-align:center;" > < h1 style = "color:green" > GeeksforGeeks </ h1 > < h3 > Change the Style of Anchor Tag Title Attribute </ h3 > < a href = "geeksforgeeks.org" data-title = "GFG" > Link </ a > with styled tooltip < br > < a href = "geeksforgeeks.org" title = "GFG" > Link </ a > with normal tooltip </ body > </ html > |
Output: