如何在表格的确切位置显示工具提示？

我有一个表，其中的行正在循环，并且在某些情况下，我想使用class =“ updeltd”将其tr的鼠标悬停在td下，并显示div元素作为其工具提示。我的问题是，当我将鼠标悬停在那个td上时，我只能在表格的第一行而不是在放置鼠标的行上显示我的工具提示。我认为我的javascript函数有问题。这是详细信息，谢谢...

jQuery / Javascript函数：

function DispTooltip() {

           var ttipshow = document.getElementById("tooltip");
           ttipshow.style.display = "block";

           var coord = $(this).closest('table').find('td[class="updeltd"]').offset();

           $('#tooltip').css({ top: coord.top, left: coord.left - 345 });

        } 

工具提示：

<div id="tooltip"> This is my tooltip </div>

HTML视图：

<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ID)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Address)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Age)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Occupation)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Nationality)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {

    <tr >
        <td id="ID">

            @Html.DisplayFor(modelItem => item.ID)
        </td>
        <td id="Name">

            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td id="Addr">

            @Html.DisplayFor(modelItem => item.Address)
        </td>
        <td id="age">

            @Html.DisplayFor(modelItem => item.Age)
        </td>
        <td id="occ">

            @Html.DisplayFor(modelItem => item.Occupation)
        </td>

        <td id="natn">
              <input type="text" id="nat" value="  @Html.DisplayFor(modelItem => item.Nationality)" style="display:none" />
            @Html.DisplayFor(modelItem => item.Nationality)
        </td>

       <td id="image" onmouseover="DispTooltip()" onmouseout="return HideTooltip();">
       <img id="detimg" alt="" src="@Url.Content("~/Photos/" + item.Photos)" style="width:50px;height:50px" />

        </td>

       <td id="updel" class="updeltd" onmouseover="DispTooltip()" onmouseout="return HideTooltip();" >

      @Html.ActionLink("Edit/Delete Records", "UpdateDeleteRec", new { id=item.ID}) 

       </td>

    </tr>
}

</table>