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.