9

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.

3

7 Answers 7

31

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>

3
  • 1
    Didnt know that. Thanks for this soulution! But, better dont use aplpha background for this, take a look.
    – Raisch
    Jul 29, 2012 at 18:00
  • @Peeyush Kushwaha what about IE8, how to use this on IE8 browsers? Mar 27, 2013 at 14:17
  • I'm not sure if IE8 supports this, but if doesn't, you'll have to go with a JS polyfill Mar 30, 2013 at 13:34
6

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

8
  • @PeeyushKushwaha You probably saw some sort of tooltips applied Jul 26, 2012 at 15:42
  • @PeeyushKushwaha - You've probably seen a jQuery plugin at work.
    – j08691
    Jul 26, 2012 at 15:42
  • 2
    You're asking for the impossible. Jul 26, 2012 at 15:49
  • 3
    Yeah, I guess with $100M you could bribe all browser makers to make them work the way YOU want. I guess that would make this possible. In the real here-and-now world, it's not. Jul 26, 2012 at 17:23
  • 3
    i have found the answer. and answered it on this question myself. check it if you don't believe it Jul 28, 2012 at 11:58
2

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 !

1

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!

1

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>

0

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.

0

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.