jquery - jQuery: いくつかの要素の上にカーソルを置くと、カーソルの右側に div を表示します

Question

テストと呼ばれるエンティティが約 500 ～ 1000 行あり、それぞれにコンポーネントがあります。これらのコンポーネントは、ユーザーがテストにカーソルを合わせたときに表示される必要があります。mouseoverでは、div でコンポーネント情報を表示し、で非表示にしますmouseout。ハードコーディングされた上と左の位置で問題なく実行できます。ただし、その div をカーソルの右側に 50 ～ 100 px の間隔で表示できるようにする必要があります。

それを行うためにコードを変更するにはどうすればよいですか?

$(".test_row").mouseover(function (event) {
    fillTestComponents(test, testId);
});

$(".test_row").mouseout(function (event) {
    $("#testCompHolder").hide();
});

function fillTestComponents(test, testId) {
    $.ajax({
        type: 'GET',
        url: "@Url.Action("GetTestComponents", "Templates", new { area = "Orders" })",
        data: { testIdentifier: testId },
        async: false,
        success: function (data) {
            var componentCount = data.length;
            if (componentCount != 0) {
                componentsHtml = "<p><u>" + test + "</u></p><ul>";
                for (var i = 0; i < componentCount; i++) {
                    componentsHtml = componentsHtml + "<li>(" + data[i].TestIdentifier + ") " + data[i].Description + "</li>"
                }
                componentsHtml += "</ul>";
                $('#testCompHolder').html(componentsHtml);
                $("#testCompHolder").show();
            }
            else {
                componentsHtml = "<p>No components exist for this test.</p>";
                $("#testCompHolder").show();
            }
        },
        error: function () {
            alert('An error occurred while loading the results.');
        }
    });
}

HTML:

<div id="testCompHolder" style="display:none; padding: 4px; border: 2px black solid; background-color: #dddddd; position: fixed; top: 300px; left: 380px;">