Tooltip for paging numbers

[Madzie]

How to enable showing tooltips for Pagination numbers in grid !

[TorgueFan]

Hello Madzie,

Take a look at this example. The following example will help you add a Kendo ToolTip to each pagination number in the grid pager.

1. Click on the example.

2. Click run.

3. Expand grid via full screen or moving the center scrollbar. (so you can see all the page numbers)

4. Hover over page number.

First, define the grid's dataBound event. Here is documentation on dataBound.
Second, find the li elements that display the page numbers in the pager using jQuery.
Third, we loop over the li elements and add a Kendo ToolTip to each one.  Here is documentation on Tooltip.
Finally, we are getting the text of the li(which is the page number), and we set the content of the ToolTip with it. 

You may have to adjust the code to your needs.

Good luck!

[Madzie]

Thanks for this.

I see in example that the paging numbers show up in tooltip but you will notice that the tooltips on hovering to different numbers doesn't close the previous one's. PFA.

Also, I am looking to see if the Narrator(Microsoft) can read the tooltip, in the example it doesn't.

[Alexander Popov]

Hi Madzie,

I would suggest using a single Tooltip instance and generating the content dynamically, as shown here. Neither the Pager nor the Tooltip however, support keyboard navigation, which is required in order to use any screen readers effectively.

Regards,
Alexander Popov
Telerik

 

 

[Madzie]

So with Telerik grid, the pagination doesn't support tabbing within numbers !

Is there a plan to fix it ?

 

[Alexander Popov]

Hi Madzie,

Including a keyboard navigation support for the Pager is currently not on our immediate to-do list. I would encourage you to submit this request on our feedback portal.

Regards,
Alexander Popov
Telerik