Hi mangusiva,
I have modified your code as your code was generating the single tooltip div which was generating tool tip for the last row for the gridview not for all the row so refer below code
HTML
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function pageLoad(sender, args) {
$('.gridViewToolTip').mouseover(function () {
var positionTop = $(this).position().top;
var positionLeft = $(this).position().left;
var tooltip = $(this).closest('tr').find("[id*=tooltip]").text();
var Id = $(this).closest('tr').find('[Id*=myLabel]').text();
var finaltooltip = 'tooltip' + Id;
$('[id *= ' + finaltooltip + ']').css({
'top': positionTop,
'left': positionLeft
});
$('[id *= ' + finaltooltip + ']').fadeIn();
});
}
</script>
<div class="DIV_details">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always" ChildrenAsTriggers="true">
<ContentTemplate>
<div data-ng-app="sampleapp" data-ng-controller="samplecontrol">
<asp:GridView ID="GridView1" runat="server" CssClass="mydatagrid rows headerStyle Grid "
HeaderStyle-CssClass="header" RowStyle-CssClass="rows" AutoGenerateColumns="False"
AllowPaging="false" OnRowDataBound="OnRowDataBound" ShowFooter="false" ShowHeader="True"
OnSelectedIndexChanged="GridView1_SelectedIndexChanged" HeaderStyle-BackColor="Red"
CellPadding="2" CellSpacing="2" BorderStyle="None" HeaderStyle-ForeColor="Green"
ForeColor="Black" GridLines="Both" OnRowCommand="GridView1_RowCommand" AllowSorting="true"
EnableViewState="true">
<Columns>
<asp:TemplateField>
<ItemStyle Width="30px" HorizontalAlign="Center" />
<ItemTemplate>
<asp:CheckBox ID="chkRow" runat="server" AutoPostBack="true" OnCheckedChanged="chkRow_CheckedChanged" />
</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="chkAllSelect" runat="server" onclick="CheckAll(this);" />
</HeaderTemplate>
</asp:TemplateField>
<%-- TOOLTIP WITH UID COLUMN ON GRIDVIEW --%>
<asp:TemplateField HeaderText="Device ID" ItemStyle-Width="190px" ItemStyle-HorizontalAlign="Left">
<ItemTemplate>
<asp:Label ID="myLabel" runat="server" Text='<%# Eval("uid") %>' class="gridViewToolTip" />
<div id="tooltip<%#Eval("uid")%>" title="" style="position: absolute; top: 0; left: 0;
z-index: 3; display: none; background-color: #FB66AA; color: White; padding: 5px;
font-size: 10pt; font-family: Arial;" class="divTable divRow divCell div-table ">
<table id="toolID" class="hovertable">
<%--<tr>
<td style="white-space: nowrap;" ><b>Date</b> <b>:</b></td>
<td><%# Eval("serDate")%></td>
</tr>--%>
<tr>
<td style="white-space: nowrap;">
<b>Date</b>
</td>
<td>
<%# Eval("serDate")%>
</td>
</tr>
<%--<tr>
<td style="white-space: nowrap;"><b>Time</b> <b>:</b></td>
<td><%# Eval("serTime")%></td>
</tr>--%>
<tr>
<td style="white-space: nowrap;">
<b>Time</b>
</td>
<td>
<%# Eval("serTime")%>
</td>
</tr>
<%--<tr>
<td ><b>ID</b> <b>:</b></td>
<td><%# Eval("uid")%></td>
</tr>--%>
<tr>
<td style="white-space: nowrap;">
<b>ID</b>
</td>
<td>
<%# Eval("uid")%>
</td>
</tr>
<%--<tr>
<td><b>Latitude</b> <b>:</b></td>
<td><%# Eval("latitudeValue")%></td>
</tr>--%>
<tr>
<td style="white-space: nowrap;">
<b>Latitude</b>
</td>
<td>
<%# Eval("latitudeValue")%>
</td>
</tr>
<%--<tr>
<td><b>Logitude</b> <b>:</b></td>
<td><%# Eval("logintudeValue")%></td>
</tr>--%>
<tr>
<td>
<b>Logitude</b>
</td>
<td>
<%# Eval("logintudeValue")%>
</td>
</tr>
<%--<tr>
<td style="white-space: nowrap;"><b>Speed</b> <b>:</b></td>
<td><%# Eval("kmpl")%></td>
</tr>--%>
<tr>
<td style="white-space: nowrap;">
<b>Speed</b>
</td>
<td>
<%# Eval("kmpl")%>
</td>
</tr>
<%--<tr>
<td ><b>Location</b> <b>:</b></td>
<td><%# Eval("location")%></td>
</tr> --%>
<tr>
<td>
<b>Location</b>
</td>
<td>
<%# Eval("location")%>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="60px" DataField="gpsStatus" HeaderText="GPS" ItemStyle-HorizontalAlign="Center"
HeaderImageUrl="Images/GPS11.ico" HeaderStyle-ForeColor="Maroon" HeaderStyle-BackColor="#ffb8a6">
<ItemStyle Width="25px" Height="10px" />
<ItemStyle />
</asp:BoundField>
<asp:BoundField ItemStyle-Width="150px" DataField="gsm" HeaderText="GSM" ItemStyle-HorizontalAlign="Center"
HeaderImageUrl="Images/gsm_7.ico">
<ItemStyle Width="25px" Height="10px" />
<ItemStyle />
</asp:BoundField>
<asp:BoundField ItemStyle-Width="150px" DataField="kmpl" HeaderText="Status" ItemStyle-HorizontalAlign="Center"
HeaderImageUrl="icons/car2.ico">
<ItemStyle Width="25px" Height="10px" />
<ItemStyle />
</asp:BoundField>
<asp:CommandField runat="server" HeaderText="Route" HeaderImageUrl="icons/direction1.ico"
ShowDeleteButton="true" ButtonType="Image" DeleteImageUrl="icons/trackview.ico">
</asp:CommandField>
</Columns>
<HeaderStyle BackColor="Red" Font-Bold="true" ForeColor="Red" Height="10px" />
<AlternatingRowStyle BackColor="Blue" ForeColor="#284775" />
</asp:GridView>
<script type="text/javascript">
function CheckAll(Checkbox) {
var GridVwHeaderCheckbox = document.getElementById("<%=GridView1.ClientID %>");
for (i = 1; i < GridVwHeaderCheckbox.rows.length; i++) {
GridVwHeaderCheckbox.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked = Checkbox.checked;
}
}
</script>
</div>
<asp:Timer ID="Timer1" runat="server" Interval="3000">
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
Screenshot
