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.

filter_none

edit
close

play_arrow

link
brightness_4
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">
        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>

chevron_right


Output:

Example 2: The following example styles the tool-tip better than the last one using some better CSS properties.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.