Adding a popup after clicking on text. (Asking for help)

I am currently going through (adding a dialogue panel tutorial)

This would be used for a character creation menu.

This is the code I am trying to modify:

<div id="dialog_window_1" class="dialog_window" title="Your Character">
      <td colspan="2">Name: <input type="text" id="name_input" value="Skybird"/></td>
        Sex: <input type="radio" name="sex_input" value="Male" checked="checked"/>Male
             <input type="radio" name="sex_input" value="Female" checked="checked"/>Female


 Sex: <input type="radio" name="sex_input" value="Male" checked="checked"/>Male

What I would like to add is a popup window of some sort when you click on the text "male" so it would give a brief description of some sort.

I have went over to to learn more about the various tools I could use, such as popup, tooltip, modal and so forth; However, when I try to implement the code to this example, i am unable to have it work.

The best solution I have found as of now is to add a label when you hover over the text.

content: attr(title);
border:1px solid red;

Sex: <label class="selection-confirm" title="Some title.">
<input type="radio" name="sex_input" value="Male"  checked="checked" >Male

I would preferer to have some sort of popup window appear rather than having to use this label feature.

Any help would be appreciated.

Log in to post a reply.