Using popups

Popups (also known as tooltips) are similar to dialogs, but they are much smaller and not necessarily modeled. They can be useful for providing contextual help or descriptive text.

Let's look at an example:

Listing 7-5: test7.html
<div data-role="page" id="first">

   <div data-role="header">
         <h1>Popup Demo</h1>
   </div>
   
   <div role="main" class="ui-content">
          
         <a href="#firstPopup" data-role="button" 
data-rel="popup">Show Popup</a>

   </div>

   <div data-role="popup" id="firstPopup">
    <p>This is just a test. It has some text in it. 
 It is incredibly awesome.</p>
   </div>

</div>

Inside our main content div is a simple link. In order to let jQuery Mobile know that this links to a popup, the data-rel attribute is specified. Note the ID value points to...