There are quite a number of ways to create this effect. Some are listed here:
HTML
HTML codes:
<abbr title="Hypertext Markup language">HTML</abbr>
CSS codes:
abbr[title]:after{
/*Workaround for Gecko*/
content: "";
}
abbr[title]:hover:after{
/*Shows the value of the title attribute when hovered*/
content: " (" attr(title) ")";
}
some text
HTML codes:
<strong>some text</strong>
CSS codes:
strong:after,
#n2 strong:before{
/*Workaround for Gecko*/
content: "";
}
strong:hover:after{
content: "\00BB"
}
strong:hover:before{
content: "\00AB"
}
HTML codes:
<a href="http://w3.org/" title="World Wide Web Consortium">W3C</a>
CSS codes:
a[title]:after{
/*Workaround for Gecko*/
content: "";
}
a[title]:hover{
/*Hides the anchor*/
visibility: hidden;
}
a[title]:hover:after{
/*Shows the generated content*/
content: attr(title) " (" attr(href) ")";
visibility: visible;
}
sample text
HTML codes:
<span>sample text</span>
CSS codes:
span:before{
/*Workaround for Gecko*/
content: "";
}
span:hover:before{
/*The URI pointing to the location of the image*/
content: url("../newticon.png");
}
The HTML and CSS codes displayed are just plain samples for you to understand the general idea of how this works. This sort of effect is, of course, extensible and may be tweaked to suit your desire. The only limitation is your imagination.
Note: The Gecko workaround codes above is applicable to older versions of Gecko-based browsers. Latest versions don't need this code anymore.