Text hint that stays until you start typing

by tedp

HTML

<p>Sign up!</p>
<form>
        <div id="emailWrap">
                <input type="text" id="email"></input>
                <div id="tip">email</div>
                <div id="fieldBG"> </div>
        </div>
        <p id="count"></p>
</form>

CSS

body {
          background-color: #E8E8E8;
          font-family: Helvetica, san-serif;
          padding: 60px;
          margin: 0;
        }

        #emailWrap {
          position: relative;
        }

        #email, #tip, #fieldBG {
          position: absolute;
          top: 0;
          left: 0;
          padding: 8px;
          margin: 0;
          width: 300px;
          font-size: 15px;
          font-family: Helvetica, san-serif;
        }

        #email {
          z-index: 2;
          border: 1px solid gray;
          background-color: transparent;
        }

        #tip {
          z-index: 1;
          border: 1px solid white;
          color: #999;
          background-color: white;
        }

        #fieldBG {
          z-index: 0;
          border: 1px solid white;
          background-color: white;
        }

JavaScript

$("input").keyup(function() {
    var value = $(this).val().length;
    if (value > 0) {
        $("#tip").hide();
    } else {
        $("#tip").show();
    }
}).keyup();