Learn Java for Web Development

CHAPTER 2: Building Web Applications Using Servlets and JSP 99

Before we talk about how the search by keyword works, let’s first take a look at one usability aspect
of search. There is a question mark next to the search field, which serves to help the user. In other
words, on mouse-hover, a tooltip is shown that indicates search parameters to be used,
as illustrated in Figure 2-40.

Figure 2-40. Tooltip for the search parameters

To understand how the tooltip works, take a look at the markup of the search field, which is in
leftColumn.jsp, as illustrated in Listing 2-38.

Listing 2-38. Search Field Markup

1.

   Line 4: This has a class tooltip_message. The tooltip works using jQuery and

CSS on this class.

Listing 2-39 illustrates the jQuery code.

Listing 2-39. jQuery for the Tooltip

1.$(document).ready(function () {
2.$("span.tooltip_message").hover(function () {
3.$(this).append('