How to change the style of the title attribute inside an anchor tag?
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.
1. Code:
<!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"> Soltuts.com </h1> <h3> Change the Style of Anchor Tag Title Attribute </h3> <a href="https://soltuts.com/tag/css/" data-title="Soltuts"> Link </a> Title with different background color and style <br> <a href="https://soltuts.com/tag/css/" title="Soltuts"> Link </a> Title with a normal tool-tip </body> </html>
2. Example:
Run the program to get the result.