Building Web Applications Using Servlets and JSP - Learn Java for Web Development - page 99

4.},function () {
5.$("div.message").remove();
6.});
7.});
 Line 2 : The class tooltip_message and the <span> tag are used as a selector on
which the hover function is called.
 Line 3 : The message to be displayed in the tooltip is appended to the object
returned by the selector in line 2.
In the similar manner, a tooltip can be added to the images on the home screen, as illustrated in
Figure 2-41 . Listing 2-40 illustrates the jQuery function used.
Figure 2-41. Tooltip for the images
Listing 2-40. jQuery Function for the Image Tooltip
$("span.tooltip_img1").hover(function(){$(this).append('<div class="message"><ul>
<li>Title - Beginning Groovy, Grails and Griffon</li><li>Author: Vishal Layka</li>
<li>Publisher: Apress</li></ul></div>');
}, function(){$("div.message").remove();});
Listing 2-41 illustrates the CSS code for the tooltip.
Listing 2-41. CSS for Tooltip
1.span.tooltip_message,span.tooltip_img1 {
2.cursor: pointer;
3.display: inline-block;
4.background-color: #F20B26;
5.width: 16px;
6.height: 18px;
7.color: #ffffff;