Заменяем подсказки на всплывающие используя CSS и jQuery

Добавляем в CSS файл строки:

#floatingMessage, #floatingMessage.hidden {
  display: none;
}

#floatingMessage.visible {
  display: block;
  position: absolute;
  background-color: white;
  border: 2px solid black;
  padding: 5px;
  z-index: 7;
  max-width: 250px;
}
.form-item .description {
display:none;
}

jQuery:

$(document).ready(function(){

  // check to see if floatingMessage exists in DOM
  if ($(document).find('#floatingMessage').length==0) {
    $('body').append("

");
  }

  $('form#node-form div.form-item').each(function(){
    result = $(this).find('div.description').length;
    if (result) {
      // hide description
      $('div.description:first', this).hide();

      $(this).hover(
        function(){

          // get message html
          description = $('div.description:first', this).html();

          // set message html
          $('#floatingMessage').html(description);

          // set message position
          $(this).mousemove(function(e){
            $('#floatingMessage').css({
              top: e.pageY+15 + 'px',
              left: e.pageX+15 + 'px',
            });
          });

          // show message
          $('#floatingMessage').removeClass('hidden').addClass('visible');

        },
        function(){

          // hide message
          $('#floatingMessage').removeClass('visible').addClass('hidden').html('');

        }

      );
    }
  });
});

В итоге получаем такую картину: