PopOver Labels

http://blog.brianrichards.net/post/16068189422/label-positions-revisited

by BrianRichards

HTML

<div class="signUpContainer">
    <p>Bacon ipsum dolor sit amet t-bone tongue meatloaf shankle jowl, turducken ham drumstick frankfurter. Fatback drumstick salami, prosciutto turducken sausage sirloin swine pork chop.</p>
    <p class="formField placeholderLabel">
        <label for="favBook">Favorite Book</label>
        <input type="text" id="favBook" />
    </p>
    <p class="formField placeholderLabel">
        <label for="favMovie">Favorite Movie</label>
        <input type="text" id="favMovie" />
    </p>
    <p class="formField placeholderLabel">
        <label for="favFood">Favorite Food</label>
        <input type="text" id="favFood" />
    </p>
</div>

CSS

body{
    font-family:"Segoe UI", sans-serif;
}
.signUpContainer{
    padding:15px;   
}
.formField{
    margin:10px 0px;
    position:relative;   
}
.formField label{
    font-family:"Segoe UI", sans-serif;
    font-size:12px;
    display:block;
}
.formField input{
    height:20px;
    padding:5px 10px;
    width:250px;
    font-family:"Segoe UI", sans-serif;
    font-size:16px;
    border:1px solid #999; 
}
.formField input:focus{
    outline:0;
    background-color:#FFF;
    border:1px solid #003;
}
.placeholder{
    color:#AAA;
    position:absolute; 
    padding:8px 15px 8px 10px;
    left:0;
} 
.popOver{
    background-color:#FFF;
    color:#333;
    border:1px solid #003;
    border-bottom:none;
    margin-top:-31px;
    width:250px;
    padding-right:10px;
}
.offScreen{
    position:absolute;
    left:-999px;  
}

JavaScript

$(".placeholderLabel label").addClass("placeholder");

$(".placeholderLabel input").focus(function(){
    $(this).parent(".placeholderLabel")        
        .children("label")
        .animate({"margin-top": "-30px"}, 50, function(){
            $(this).addClass("popOver");
        }).removeClass("offScreen");
});

$(".placeholderLabel input").blur(function(){
    var hasValue = ($(this).val() !== "");
    
    $(this).parent(".placeholderLabel")
        .children("label")
        .removeClass("popOver")
        .animate({"margin-top": "0px"}, 25, function(){
            if (hasValue){
                $(this).addClass("offScreen");
            }                
        });
});