CODEWITHSUNDEEP
htmlcss
Peeyush Kushwaha
Peeyush Kushwaha

Reputation: 3623

styling an image title attribute using css?

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

<body>
    <img src="img.jpg" title = "<span class='title'> title </span>
</body>

My style is in head. I wonder why it’s being shown as plain text and why style isn’t working.

Upvotes: 9

Views: 87048

Answers (7)

Yannick Blondeau
Yannick Blondeau

Reputation: 9621

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.

Upvotes: 0

Peeyush Kushwaha
Peeyush Kushwaha

Reputation: 3623

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>

Upvotes: 31

S M Abrar Jahin
S M Abrar Jahin

Reputation: 14588

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>

Upvotes: 1

ter24
ter24

Reputation: 462

Another great fiddle is http://jsfiddle.net/tDQWN/129/ (I can't take credit, but in the same search I found both posts). It's a similar solution but the styling is a bit fancier.

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

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

a[data-title]:hover:after {
  content: attr(data-title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -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, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

And HTML:

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <a href="#" data-title="Hello, i am a link">Vestibulum</a> tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. <a href="#" data-title="This is another link">Mauris placerat</a> eleifend leo.</p>

Hope this helps someone!

Upvotes: 1

XhkUnlimit
XhkUnlimit

Reputation: 353

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 !

Upvotes: 2

0b10011
0b10011

Reputation: 18795

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.

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

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

Upvotes: 6

Related Questions