Learn Java for Web Development

100 CHAPTER 2: Building Web Applications Using Servlets and JSP

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('

');
}, 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;