Hello,
I am currently going through http://docs.textadventures.co.uk/quest/ui-dialogue.html (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">
 <table>
    <tr>
      <td colspan="2">Name: <input type="text" id="name_input" value="Skybird"/></td>
    </tr>
    <tr>
      <td>
        Sex: <input type="radio" name="sex_input" value="Male" checked="checked"/>Male
             <input type="radio" name="sex_input" value="Female" checked="checked"/>Female
      </td>
    </tr>
  </table>
</div>

Specifically:

 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 https://www.w3schools.com/ 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.

<style>
label[title]:hover:after{
content: attr(title);
border:1px solid red;
}
</style>

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

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

Any help would be appreciated.