Добавляем в 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('');
}
);
}
});
});
В итоге получаем такую картину: