RadTooltipManager with multiple RadDatePicker

[Jonas]

Hello,

I use a RadTooltipManager with AutoTooltipify="true" in the MasterPage of my Solution. And I have a page .aspx with 70 RadDatePicker and there is a problem of performance because it's very slow for to access the page (slower in IE).
​

I make a page of demo with 75 RadDatePicker and a RadTooltipManager in the MasterPage and I use the UI Responsiveness of the F12 developer tools of IE.

Result in the first attachement. The event DOMContentLoaded has a duration of 3sec ! And I seen that the majority of instructions is the update of css style of each day cell tooltip of each RadDatePicker in the page (style.visibility="hidden" and style.display="none").


So, I set ShowDayCellToolTips="false" for all RadDatePicker of my demo (because these tooltips is useless for us) and I restart with the UI Responsiveness.

Result in the second attachement. So, yes the duration of the DOMContentLoaded has a duration of 1.2sec now but there are always the updates of css style of each tooltip in the page like before. And I want to know why the RadTooltipManager set the css style of each day cell tooltip(with ShowDayCellToolTips="false") ? And what can i do for more optimizing for the postback of this page ?

[Marin Bratanov]

Hello Jonas,

When AutoTooltipify==true, RadToolTipManager goes through all HTML elements on the page, so it can attach a RadToolTip handler to them. This means that having a lot of HTML elements can cause a slowdown and this cannot be avoided.

If the tooltips for the days are not rendered, the tooltip manager will have to attach handlers for less elements (the days elements will not have a title attribute, so the tooltip manager will simply skip over them).

What I can suggest is setting the AutoTooltipify property to false and when the page fully loads on the client, initiate the tooltip generation. Something like:

<telerik:RadDatePicker runat="server" ID="RadDatePicker1">
    <Calendar ShowDayCellToolTips="false"></Calendar>
</telerik:RadDatePicker>
<telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" AutoTooltipify="false"></telerik:RadToolTipManager>
<script>
    function createTooltips() {
        var ttmngr = $find("<%=RadToolTipManager1.ClientID%>");
        ttmngr.set_autoTooltipify(true);
        ttmngr.tooltipify(); //consider using a timeout here to delay the expensive operation even more
        Sys.Application.add_load(createTooltips);
    }
    Sys.Application.add_load(createTooltips);
</script>

Regards,

Marin Bratanov
Telerik