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.
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 !
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!
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>
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.
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.
