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:

My Personal Notes

Recommended Posts: