Tooltips

<form action="">

  <div class="name">

    <label for="name">Имя: </label>

    <input type="text" id="name">

  </div>

  <div class="phone">

    <label for="phone">Телефон:</label>

    <input type="text" id="phone">

  </div>

  <div class="button">

    <input type="button" value="Отправить">

  </div>

</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

form {

  margin: 30px 200px;

  display: inline-block;

}

label {

  display: block;

}

div {

  margin-bottom: 10px;

  position: relative;

}

.button {

  text-align: center;

}

.tooltip {

  padding: 5px;

  width: 70px;

  position: absolute;

  left: -90px;

  top: 16px;

  background: red;

  border: 1px solid #000;

  border-radius: 3px;

  color: #fff;

}

$('input[type="button"]').on('click', function() {

  var name = $('.name input'),

      phone = $('.phone input');

  if ($(name).val() == '') {

    if (!$(name).hasClass('tooltip-exist')) {

      $('<div class="tooltip">Ошибка</div>').appendTo('.name');

      $(name).addClass('tooltip-exist');

    } else {

      $('.tooltip').css('display', 'block');

    }

  }

  if ($(phone).val() == '') {

    if (!$(phone).hasClass('tooltip-exist')) {

      $('<div class="tooltip">Ошибка</div>').appendTo('.phone');

      $(name).addClass('tooltip-exist');

    } else {

      $('.tooltip').css('display', 'block');

    }

  }

  var clear = function() {

    $(this).siblings('.tooltip').css('display', 'none');

  }

  $(name).on('click', clear);

  $(phone).on('click', clear);

});