styling an image title attribute using css?

Question

I want to style the text we see when we hover over the image. I tried the following but it won’t work:

Answer 1

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 !

Answer 2

From the HTML spec (emphasis mine):

The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; on interactive content, it could be a label for, or instructions for, use of the element; and so forth. The value is text.

Ergo, only text is allowed in the title attribute. For a custom HTML tooltip, you must use a custom solution, such as hiding the content by default and showing it on :hover with CSS, or using JavaScript to pull from a data-... attribute.

Answer 3

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>

Answer 4

If what you want to do is display a text when the mouse hovers an image, you can do something using CSS :hover state.

Such a solution is described in this blog post.

Answer 5

You can do that by this way-

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;
    left: 0px;
    margin: 10px;
    width: 250px;
    position: relative;
    top: -150px;
    text-decoration: none
}

<a href="#" class="tip">
   <img src="http://www.w3schools.com/html/pic_mountain.jpg">
   <span>This is the CSS tooltip showing up when you mouse over the link</span>
</a>

Answer 6

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