If my link is outside the template than tooltip is working fine but if its in JQuery template not working at all. Tried many examples but no success.
Below is the code
In Js file after grid is loaded
ReloadGrid();
$ (".hello").tooltip({
track: true,
delay: 0,
showURL: false,
fade: 250,
bodyHandler: function () {
return $ ($ (this).next().html());
},
showURL: false
});
On Page
<script id="cellTemplate" type="text/x-jQuery-tmpl">
<tr class="gridRowCursor" >
<td class="cellTd ">
<input type="checkbox" id="deleteCb" />
<input type="hidden" id="Id_ + $ {Id}" class="idField" value="$ {Id}" />
</td>
<td class="cellTd">
<input id="index" name="index" class="numberField" type="text" value="$ {IndexOrder}" />
</td>
<td class="cellTdLeft" style="font-size:11px;">
<a class="hello" href="#">{{html DisplayName}}</a>
<div id="tooltip" style="display: none">
<div>
{{html UrlName}}
</div>
</div>
</td>
<td class="cellTd ">
<input type="checkbox" id="activeCb" {{if Active}} checked{{/if}} />
</td>
</tr>
<tr id="$ {Id}" class="gridRow" style="display: none;">
<td class="cellTdLeft" colspan="5" style="padding-left: 15px; font-size:11px;">
{{html UrlName}}
</td>
</tr>
</script>
<span class="instructions">Only numeric value is allowed in IndexOrder textbox.</span>
<div class="gridDiv">
<table id="set1" class="gridTable" cellspacing="0" cellpadding="0" >
<thead>
<tr class="gridTitleRow">
<td class="iconLink width36">Delete</td>
<td class="iconLink width60">Sort Order</td>
<td class="iconLink width500">Display Name</td>
<td class="iconLink widthAuto">Active</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
