How to display the tooltip in exact location with in the table?

Question

I have a table were the row is being looped and and for some instance I want to hover the mouse of one of its tr under the td with a class="updeltd" and display a div element as its tooltip. My problem is when I hover the mouse on that td I can only be able to display my tooltip on the first row of the table instead of the row where I put the mouse. I think I have a problem on my javascript function. Here's the details, Thanks...

jQuery/Javascript function:

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 });

        } 

Tooltip:

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

HTML View:

<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>

Answer 1

What you currently doing is finding the closest table element then finding all the class="updeltd" elements so .offset() returns the offset of the first one (the first row). What you need is

var coord = $(this).closest('tr').children('.updeltd').offset();

Note you are also creating invalid html by duplicating id's for each td element. Use class names instead