Styling native tooltip from title="Tooltip text" [duplicate]

Question

Example:

<a href="example.com" title="My site"> Link </a> 

How do I change the presentation of the "title" attribute in the browser?. By default, it just has yellow background and small font. I would like to make it bigger and change the background color.

Is there a CSS way to style the title attribute?

Answer 1

It seems that there is in fact a pure CSS solution, requiring only the css attr expression, generated content and attribute selectors (which suggests that it works as far back as IE8):

https://jsfiddle.net/z42r2vv0/2/

a {   position: relative;   display: inline-block;   margin-top: 20px; }  a[title]:hover::after {   content: attr(title);   position: absolute;   top: -100%;   left: 0; }

<a href="http://www.google.com/" title="Hello world!">   Hover over me </a>

update w/ input from @ViROscar: please note that it's not necessary to use any specific attribute, although I've used the "title" attribute in the example above; actually my recommendation would be to use the "alt" attribute, as there is some chance that the content will be accessible to users unable to benefit from CSS.

update again I'm not changing the code because the "title" attribute has basically come to mean the "tooltip" attribute, and it's probably not a good idea to hide important text inside a field only accessible on hover, but if you're interested in making this text accessible the "aria-label" attribute seems like the best place for it: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

Answer 2

Here is an example of how to do it:

a.tip {      border-bottom: 1px dashed;      text-decoration: none  }  a.tip:hover {      cursor: help;      position: relative  }  a.tip span {      display: none  }  a.tip:hover span {      border: #c0c0c0 1px dotted;      padding: 5px 20px 5px 5px;      display: block;      z-index: 100;      background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;      left: 0px;      margin: 10px;      width: 250px;      position: absolute;      top: 10px;      text-decoration: none  }

<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>