I have a grid which on initial page load looks as shown in the attached file (grid.jpg)
When i hover on any cell of the grid, is should show me all hidden contents of the cell. It should be something like a tool tip.
Eg : My 2nd column of the grid is "Center Id" and its value is "005-AA-AA".
When I move my mouse to any of these locations, these values should be visible.
I have the following code, which i got from one of the sites and I am trying to provide tooltip in some of the columns but it is not working for me.
It is as follows-
Index Page:
<script src="../../resources/js/paynepoints.telerik.grid.tooltips.js" type="text/javascript"></script>
<script src="../../resources/js/jquery.livequery.js" type="text/javascript"></script>
@(Html.Telerik().Grid(Model)
.Name(
"Grid")
.HtmlAttributes(
new { @class = "pp-tooltips" })
.Resizable(resizing => resizing.Columns(
true))
.Columns(columns =>
{
columns.Bound(o => o.Priority).Title("!").Width(50);
columns.Bound(o => o.CenterId);
columns.Bound(o => o.MPI).HtmlAttributes(
new{ @class = "pp-tooltips"});
columns.Bound(o => o.PatientName).HtmlAttributes(
new{ @class = "pp-tooltips"});
columns.Bound(o => o.ClaimNumber).Title(
"Claim #").HtmlAttributes(new{ @class = "pp-tooltips"});
columns.Bound(o => o.ClaimType).Title(
"Claim Type");
columns.Bound(o => o.Age);
columns.Bound(o => o.Rank);
//and so on for other columns
})
paynepoints.telerik.grid.tooltips.js file-
$(document).ready(
function () { $(".t-grid.pp-tooltips td:not(.pp-notip)").livequery(function () { $(this).attr("title", $(this).text()); }, function () { $(this).removeAttr("title"); }); });
I have downloaded the livequery file from internet.
Please let me know what is wrong in my code? Please let me know there is a better solution to this?
Its very urgent :(