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:
.png)
