Hide labels, but show on focus to replace the hidden placeholder text as a reminder

The HAML

%form
  %ol
    %li
      %label.hidden(for="the_input") The label text
      %input(name="the_input" placeholder="the placeholder text")

The Javascript

// Span append is for the arrow point.

$("label.hidden").append('<span></span>').hide().each(function(){
  $("#"+$(this).attr('for')).focus(function(){
    $("label[for="+$(this).attr('id')+"]").show();
  }).blur(function(){
      $("label[for="+$(this).attr('id')+"]").hide();
    });
});

The SASS

li
  position: relative
  label.hidden
    display: block
    width: 110px
    background: black
    background: rgba(0,0,0,0.8)
    color: #ddd
    padding: 5px 10px
    margin: 1px 0
    font-size: 13px
    line-height: 22px
    position: absolute
    height: 22px
    top: 1px
    right: -139px
    +rounded(3px)
    span
      opacity: 0.8
      width: 18px
      height: 18px
      position: absolute
      left: -18px
      top: 7px
      background: url(../images/right_highlight_arrow.png)
      

TheHAML

%form
  %ol
    %li
      %label.hidden(for="the_input") The label text
      %input(name="the_input" id="the_input" placeholder="the placeholder text")

Editing gists seems to be broken, the second HAML with the ID is the working one.