Add tooltip to ASP.NET Datapager

ASP.NET pager doesn’t provide any direct support for adding tooltip to its different buttons . But there are some work arounds through which you can provide tooltips to ASP.NET data pager.

The structure of a simple data pager is as follows:

But How ever it provides CSS classes for all set of buttons. And in the page it is rendered as simple span and anchor link. If we are giving some unique class to all buttons present in the data pager and through javascript we can retrive the elements and we can assign Tool Tip to them.

Here is the sample code of javascript and data pager.

Data Pager:
————-

Javascript
……………..

$(document).ready(function()
{
// For First and previous buttons
var fastPrevious = new Array;
fastPrevious = $('.firstPrevious');
$(fastPrevious[0]).attr('title', 'First page');
$(fastPrevious[1]).attr('title', 'Previous page');


// For next and Last Buttons
var lastNext = new Array;
lastNext = $('.lastNext');
$(lastNext[0]).attr('title', 'Next page');
$(lastNext[1]).attr('title', 'Last page');


// For Next or previous set page buttons.
var middleButtons = new Array;
middleButtons = $('.middleButtons');
var buttonLength = middleButtons.length;
for (var i = 0; i < buttonLength; i++)
{
$(middleButtons[i]).attr('title', 'Next Previous set of pages');
}