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

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.<form class="search">
2.<input type="hidden" name="action" value="search" />
3.<input id="text"type="text" name="keyWord" size="12" />
4.<spanclass=" tooltip_message ">?</span>
5.<p />
6.<input id="submit" type="submit" value="Search" />
7.</form>
 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('<div class="message"><p>Search by Keyword in:<ul><li>Author First Name </li>
<li>Author Last Name <li>Title of the book </li></ul></p></div>');