Следование текста на web странице за указателем мыши jQuery

Сайт https://anteh.ru

В целях отладки разрабатываемой страницы иногда нужно посмотреть на те, или иные динамически меняющиеся переменные. И/или переменные, формируемые при наступлении тех или иных событий. Для удобства эту информацию прикрепим к указателю мыши в $(document).ready();. Строки с нужной информацией будут следовать за указателем курсора мыши. Приведу содержимое .js файла:

$(document).ready(function() //
{   
    //Див в который в последствии добавим какую-либо отладочную информацию
    var e1 = $(document.createElement('div')); //Создаём div тоскаемый за мышкой, с отображением отладочных данных
    e1.text('дивD'); e1.attr({ id: 'MC', position: 'absolute' });
    e1.css({ 'background-color': document.bgColor, 'display': 'inline-block' }); //фон текущей страницы, ширина дива подстраивается под размер текста
    $(document.body).append(e1); //Добавляем див на страницу

    //Див содержащий текущие координаты мыши
    var e = $(document.createElement('div')); //Создаём div тоскаемый за мышкой, с отображением текущих координат указателя мыши
    e.text('дивC'); e.attr({ id: 'DataField1', position: 'absolute' });
    e.css({ 'background-color': document.bgColor, 'display': 'inline-block' });
    $(document.body).append(e);  //$('div#DataField1').text('див 3');

    $(document).mousemove(function(e) //Здесь прикрепляем дивы к указателю мыши
    {
        $('div#MC').text(e.pageX + ', ' + e.pageY);                     //# Координаты рядом с указателем мыши
        $('div#MC').offset({ left: e.pageX + 5, top: e.pageY - 40 });   //# Положение дива с координатами, относительно указателя мыши
        $('div#DataField1').offset({ left: e.pageX + 5, top: e.pageY - 25 }); //# Положение дива с какими-то там данными
    });
});

Количество дивов может быть любым необходимым. Для внесения информации в DataField1 див, в нужном месте кода вставляем строку:

cntf++;
$('div#DataField1').text('тут данные выводимые во вторую строку'); 

Здесь cntf -глобальная переменная объявленная где-то выше. В див следующий за мышью, выводим информацию о том, сколько проходов было по текущей ветке кода. В общем в див можно поместить всё, что будет нужно в процессе отладки и всё это дело будет таскаться по экрану за указателем мыши. Так это выглядеть на экране:

Верхние 2 цифры, разделённые запятыми -текущие координаты курсора. Нижние 4ре цифры разделённые двоеточием -координаты некоторого прямоугольника, вычисляемые при наведении мыши на некоторые элементы страницы. При необходимости можно использовать любое количество дивов. Привожу ещё одну картинку:

.js инструкция вывода данных во вторую строку:

$('div#DataField1').text('Abs:' + ui.helper.offset().left + ' ' + ui.helper.offset().top + ' Rel:' + ui.helper.position().left + ' ' + ui.helper.position().top); 

Здесь, на белом фоне, в верхней строке, динамически меняющиеся координаты указателя мыши. В нижней меняющиеся динамические абсолютные и относительные координаты helper/а ячейки(draggable -jQuery UI). Координаты вычисляются функциями offset и position. Таблица position:relative; Для наглядности, к дивам, можно добавить border, padding и прочие удобства. В IE, Firefox -всё ОК, в Safari при resize изменении масштаба страницы дивы "отъезжают" от указателя мыши на значительное расстояние.