と言っても機能自体は大して変わっていません。

JavaScript のソースを、jQuery で短く書き換えた、というお話です。
CSSは下の参考記事を参照して下さい。
参考記事(元コードあり)

ライブドアブログでコメント欄にレスアンカーのポップアップ機能を実装する

【ぐう速】
前記事

【覚書】コメントポップアップ機能を追加

目次

JavaScript の概要

$(function(){
    function opentext(res, evt){
        // コメント番号とマウス座標からポップアップを表示する処理
    }
    //マウスオーバーとマウスアウト時のイベントリスナー
    //即時実行処理
}
まず、クロージャの外に定義していた opentext()関数を、内側に移しました。
外だとどうしてもグローバルな名前空間への影響の恐れがつきまとうので。
※オリジナルのコードでクロージャの外に定義してあった理由は、HTML属性での関数呼び出しがあり、関数名を外から見えるようにしておく必要があったからだと思いますが、改良版ではその方法は取らなくてもよくなりました。

ポップアップ表示処理

opentext()関数の中身を見ていきましょう。
function opentext(res, evt){
引数resはコメント番号。文字列なので、あとで数値に変換します。
evtはマウスイベント情報が格納されたオブジェクト変数。ここでは座標の参照に使います。

    var $objPopup = $('#mypopup');
ポップアップ要素を jQueryオブジェクトとして変数に格納します。

    var $list = $('#ld_blog_article_comment_entries ul');
全コメントを $list という配列オブジェクトにし、参照し易くします。
ここのセレクタはテンプレによって異同があると思いますが、要はコメントを配列化してしまえばOKです。

    var obj = $list[--res];
--という演算子を適用することで、文字列であるresが自動的に数値に変換されます。
型宣言が不要な JavaScript ならではの変てこな仕様で、便利である半面、「この変数の型、今何だっけ」といちいち留意しなければいけないのが面倒でもあります。
ここはvar obj = $list[res-1];としてもいいのですが、演算子が先にあった方が数値変換のタイミングがほんの少し早くなる…かも？という信仰上のアレですね。

    if (! evt) evt = event;
何らかの理由でマウスイベント情報が渡されなかった時の保険として、改めてeventというグローバル変数を参照しています。

    var mx = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
    var my = evt.clientY + (document.body.scrollTop  || document.documentElement.scrollTop);
イベント情報からマウスの座標を取り出し、画面がスクロールされている場合は補正します。
スクロール情報に二つの書き方があるので、ちょっとコードが煩瑣になっていますね。IEｪ…

    $objPopup.html(obj?obj.innerHTML:'<span style="color:#666;">このコメント番号は存在しません</span>');
渡されたコメント番号(res)が存在するかどうかの判定に、objを使用しています。存在しなければ五行目でobjにはnullが代入されているので。
もちろん、ここはif($list.length < res)のように明示的に判定した方が分り易いかもしれませんが、スマートな書き方ではあるので、元コードの味を残しました。
ついでに、存在しないコメント番号が指定されたとき、旧バージョンではただシカトするだけだったのを、改良版ではエラーメッセージを表示するようにしました。
no-comment


    $objPopup.css({
        left: mx + 15 + 'px',
        top: my - 25 + 'px',
        zIndex: 9999
    });
求めておいたマウス座標から、少しずれた所をポップアップの表示位置に指定します。

    $objPopup.fadeIn('fast');
}
最後に、ポップアップがフェードインで出現するようにしました。

イベントリスナー

    $(document).on('mouseenter','.humokome',function(e){
        var res = $(this).attr('data-res');
        opentext(res, e);
    });
旧バージョンで HTML のonmouseover属性値として書き込んでいた関数を、jQuery の中でイベントリスナーとして登録しています。
コメント番号の参照には、data-resという属性値を利用します。
data-何々というのはユーザー側で好きに定義できる属性です。
これとイベントコールバック関数の引数e(イベント情報が入っている)を、上で定義したopentext()関数に渡し、実行します。
※元コードのarguments[0]は、このeのことです。

    $(document).on('mouseout','.humokome',function(){
        $('#mypopup').fadeOut('fast');//popoff
    });
こちらはonmouseout属性値から呼び出していたpopoff()関数の部分。
一行で書けるのでわざわざ別途定義するまでもないと思い、popoff()は立てませんでした。
また、上に合せてフェイドアウトで消えるようにしました。

以上が必要に応じて呼び出される関数です。

即時実行処理

ページの読込が終わった時、すぐに実行する処理です。 
var all =    document.getElementById('ld_blog_article_comment_entries');
まず、全コメントの入っている HTML要素をallという変数に格納します。

if(!all)return;
目的の要素が存在しなければ何もせずに抜けなさい、という命令。
この一行がないとえらいことになります。
これが無い状態でこのスクリプトを実行すると、無関係なスクリプトまで動かなくなることがありました。

all.innerHTML = all.innerHTML.replace(/[０-９]/g, function(obj){
    return String.fromCharCode(obj.charCodeAt(0)-65248);
});
見たこともないメソッドが二つほどあり、初見では意味が分かりませんでした。
全角の数字を半角に置換するのに、「０」の文字コードを引き算するという方法を使っています。
若干裏技っぽいですが、コードの書き方自体はとてもカッコいいですね。

all.innerHTML = all.innerHTML.replace(
    /(※|米|&gt;&gt;)(\d+)/g,
    '<a href="javascript:void(0)" class="humokome" data-res="$2">$1$2</a>'
);
レスを表す文字列(※1とか、米10とか、>>28とか)を<a>タグでくくっています。

具体的には、ソースの 
<li class="comment-body">
    ※1　アラサーだよ！
</li>
というHTMLを、DOM上で 
<li class="comment-body">
    <a (属性略)>※1</a>　アラサーだよ！
</li>
というふうに書き換えている、ということですね。
 
特殊な変数$1は「※」または「米」または「>>」、$2は数字を表しています。
replaceメソッドの検索対象文字列を、こういうふうに参照できるんですね。
旧バージョンでは呼び出し関数に直接この$2を渡すことができましたが、今回はそれをイベントリスナーにしてしまったので、$2はdata-resという属性値として格納しておき、イベント発火時に参照させるように工夫しました。
(text()で「※1」を取得→数字の部分だけを抽出、という方法もありましたが、簡単な道を選びました)
あと、イベントリスナーの方に長々とセレクタを指定するのが嫌だったので、簡単に指定できるようにhumokomeというクラス名を与えました。
コメントにIDを与えてここのhref属性にそれを指定してやれば、番号クリックでそのコメントに飛ぶ、という機能も追加できますが、まあそれをせずに済むように、というのがポップアップ機能の趣旨なので。
だからここは<a>タグではなく<span>タグとかでもいいんですけどね。

タグ ：
#jQuery