title: how to make password textbox value visible when hover an icon
body: <p>Good day all,</p>
  
  <p>I have a form that has a password field:</p>
  
  <pre><code>&lt;input type="password" name="password" size="30" /&gt;
  </code></pre>
  
  <p>Naturally, the input text will be replaced by (*).</p>
  
  <p>So if the user typed <code>123</code> the box will show <code>***</code>.</p>
  
  <p>Up to here, it is straight forward, but...</p>
  
  <p>Now, I wanna add a small icon next to the password box so when the user hover over this icon, he can see what he has entered so far.</p>
  
  <p>So, while hovering, the box will show <code>123</code> and when the user leaves the icon the box should show <code>***</code> again.</p>
  
  <p>Is there any way to do this with JavaScript? Also, I am using HTML and PHP.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p><strong>It really doesn't need to be an icon, it could be a checkbox or a button... AND if it could be done in CSS, I would really appreciate to know how</strong></p>
  
  <p><em>P.S. I've googled and search the stackoverflow but with no luck</em></p>