Result

jQuery

result,js,css,html //フォーカスイベント
   $('.use-guide').focus(function() {
      //ツールチップ
      id = $(this).attr('id');
      $('.guide-tip[rel='+id+']').fadeIn();
    }).blur(function() {
      $('.guide-tip[rel='+id+']').fadeOut();
    });

css

 input[type="text"] {
    width:400px;
    padding:10px;
    border-radius:5px; /*optional*/
    color:#666;
    font-size:.875em;
    outline:none;
    background:#f6f6f6;

    border-width: 1px;
    border-style: solid;
    border-color: rgba(0,0,0,.2);
  }

  .input-line {
    position:relative;
  }

  .guide-tip {
    display:none;
    bottom:-90px;
    z-index:2000;
    position:absolute;
    width:390px;
    padding:10px 15px;
    margin:10px 0;
    background:#eaeaea;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0,0,0,.1);
    color:#999;
    font-size:.875em; 
  }

  .guide-tip .arrow {
    position:absolute;
    top:-8px;
    left:15px;
    z-index:1000;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #eaeaea;
  }

  .guide-tip .arrow.border {
    top:-9px; left:14px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #ccc;
  }​

html

    <div class="input-line">
    <div class="guide-tip" rel="title">
      <div class="arrow border"></div>
      <div class="arrow"></div>
      <em>Please follow the instruction :</em>
      <br>
      <strong>Don't use bad word!</strong>
    </div>
    <input type="text" name="title" id="title" placeholder="input something ..." class="use-guide">
    </div>

via

JS Bin

...

jsbin.com