How to Change the Style of <a> Tag Title Attribute ? - GeeksforGeeks

16 Apr, 2020
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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
Picked
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
How to set space between the flexbox ?
Design a web page using HTML and CSS
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML