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:
Last Updated :
16 Apr, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...