How to change the style of the title attribute inside an anchor tag?

Question

Example:

 Link 

How do I change the presentation of the \"title\" attribute in th

Answer 1

You can't style an actual title attribute

How the text in the title attribute is displayed is defined by the browser and varies from browser to browser. It's not possible for a webpage to apply any style to the tooltip that the browser displays based on the title attribute.

However, you can create something very similar using other attributes.

You can make a pseudo-tooltip with CSS and a custom attribute (e.g. data-title)

For this, I'd use a data-title attribute. data-* attributes are a method to store custom data in DOM elements/HTML. There are multiple ways of accessing them. Importantly, they can be selected by CSS.

Given that you can use CSS to select elements with data-title attributes, you can then use CSS to create :after (or :before) content that contains the value of the attribute using attr().

Styled tooltip Examples

Bigger and with a different background color (per question's request):

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #00FF00;
    color: #111;
    font-size: 150%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

 Link  with styled tooltip (bigger and with a different background color, as requested in the question)

 Link  with normal tooltip

More elaborate styling (adapted from this blog post):

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    position: absolute;
    bottom: -1.6em;
    left: 100%;
    padding: 4px 4px 4px 8px;
    color: #222;
    white-space: nowrap; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;  
    border-radius: 5px;  
    -moz-box-shadow: 0px 0px 4px #222;  
    -webkit-box-shadow: 0px 0px 4px #222;  
    box-shadow: 0px 0px 4px #222;  
    background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f8f8),color-stop(1, #cccccc));
    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);
    opacity: 0;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

 Link  with styled tooltip

 Link  with normal tooltip

Known issues

Unlike a real title tooltip, the tooltip produced by the above CSS is not, necessarily, guaranteed to be visible on the page (i.e. it might be outside the visible area). On the other hand, it is guaranteed to be within the current window, which is not the case for an actual tooltip.

In addition, the pseudo-tooltip is positioned relative to the element that has the pseudo-tooltip rather than relative to where the mouse is on that element. You may want to fine-tune where the pseudo-tooltip is displayed. Having it appear in a known location relative to the element can be a benefit or a drawback, depending on the situation.

You can't use :before or :after on elements which are not containers

There's a good explanation in this answer to "Can I use a :before or :after pseudo-element on an input field?"

Effectively, this means that you can't use this method directly on elements like , </code>, <code><img></code>, etc. The easy solution is to wrap the element that's not a container in a <code><span></code> or <code><div></code> and have the pseudo-tooltip on the container.</p> <p><strong>Examples of using a pseudo-tooltip on a <code><span></code> wrapping a non-container element:</strong></p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>[data-title]:hover:after { opacity: 1; transition: all 0.1s ease 0.5s; visibility: visible; } [data-title]:after { content: attr(data-title); background-color: #00FF00; color: #111; font-size: 150%; position: absolute; padding: 1px 5px 2px 5px; bottom: -1.6em; left: 100%; white-space: nowrap; box-shadow: 1px 1px 3px #222222; opacity: 0; border: 1px solid #111111; z-index: 99999; visibility: hidden; } [data-title] { position: relative; } .pseudo-tooltip-wrapper { /*This causes the wrapping element to be the same size as what it contains.*/ display: inline-block; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>Text input with a pseudo-tooltip:<br/> <span class="pseudo-tooltip-wrapper" data-title="input type="text""><input type='text'></span><br/><br/><br/> Textarea with a pseudo-tooltip:<br/> <span class="pseudo-tooltip-wrapper" data-title="this is a textarea"><textarea data-title="this is a textarea">