styling an image title attribute using css?

Nothing is impossible. edited the solution by Andres Ilich to the question: How to change the style of Title attribute inside the anchor tag?

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[data]:hover:after {
  content: attr(data);
  padding: 4px 8px;
  color: rgba(0,0,0,0.5);
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 2;
  border-radius: 5px ;
  background: rgba(0,0,0,0.5);
}
<a data="This is the CSS tooltip showing up when you mouse over the link"href="#" class="tip">Link</a>


Title attributes in IMG tags cannot contain HTML, so you cannot do this.


It is not possible directly in html, it will be in the future with the html5 figure and figcaption element, or it's possible using jquery ! See HtmlDoctor for more informations on these elements !

Tags:

Html

Css