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

Difficulty Level : Hard
Last Updated : 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:

My Personal Notes

Related Articles