RadtooltipManager on dynamically created controls

[Brent Hetland]

Hi,

- I am using version 2012.3.1016.35 of the ASP.NET AJAX dll.

GOAL:
- I dynamically create and add System.Web.UI.WebControls to my page.  Specifically, I dynamically create a Table and add TableRows and add TableCells.

- I want to Tooltipify the tooltips on the TableCells, with the RadToolTipManager

- In code-behind, I set the Tooltip property of my TableCell, then I add it to the TargetControls collection as follows:

   rttm.TargetControls.Add(MyDynamicTableCell.ClientID, True)

PROBLEM:
- My tooltips are being displayed as the traditional browser tooltips, instead of Rad Tooltips.

- Here is my TooltipManager declaration:

<telerik:RadToolTipManager ID="rttm" runat="server" Sticky="false" HideDelay="1000" AutoCloseDelay="6000" Width="260" Skin="Vista"
    RelativeTo="Element" Position="MiddleRight" ShowDelay="700" AutoTooltipify="True">
    <TargetControls>
        <telerik:ToolTipTargetControl TargetControlID="btnEditSaveAllT" IsClientID="false" />
        <telerik:ToolTipTargetControl TargetControlID="btnActionsSaveExitT" IsClientID="false" />
        <telerik:ToolTipTargetControl TargetControlID="btnActionsCancelT" IsClientID="false" />
        <telerik:ToolTipTargetControl TargetControlID="btnActionsLockAllT" IsClientID="false" />
        <telerik:ToolTipTargetControl TargetControlID="btnActionsEditTTIt" IsClientID="false" />
        <telerik:ToolTipTargetControl TargetControlID="btnActionsAdd" IsClientID="false" />
        <telerik:ToolTipTargetControl TargetControlID="ExportLabel" IsClientID="false" />
        <telerik:ToolTipTargetControl TargetControlID="btnActionsAddA" IsClientID="false" />
        <telerik:ToolTipTargetControl TargetControlID="bowlerTableStateSave" IsClientID="false" />
    </TargetControls>
</telerik:RadToolTipManager>

Q.  Is it possible to tooltipify dynamically created controls?

Q.  If so, what might I be doing wrong?

Thanks,
Brent

[Marin Bratanov]

Hi Brent,

If you add/modify targets for the manager you need to update it in the partial postback as shown in this demo: http://demos.telerik.com/aspnet-ajax/tooltip/examples/targetcontrolsandajax/defaultcs.aspx?product=tooltip.

Another thing you can consider is creating tooltips dynamically with JavaScript: http://demos.telerik.com/aspnet-ajax/tooltip/examples/radtooltipmanagerclientapi/defaultcs.aspx.

The third option you have is to use the tooltipify(area) method of the control after you update the content if you are using AutoTooltipify instead of targets: http://www.telerik.com/help/aspnet-ajax/tooltip-client-side-radtooltip.html (look for the RadToolTipManager specific API section).


Regards,
Marin Bratanov
Telerik

[Brent Hetland]

Hi Marin,

Thanks for the reply.

I didn't mention this, but I'm not doing AJAX postbacks on this page so your first bullet point doesn't apply to me.  My problem occurs during initial load of the page and all postbacks, not just during partial postbacks. In other words, I NEVER see Rad Tooltips on my dynamically created TableCells.  However, I do know my tooltip manager is working because I use it on that page for controls that are NOT dynamically created.  The Rad Tooltips work all of the time on those "static" controls, but never on the dynamically created controls.

So my first question below was:  Should what I'm doing, work?  Should I expect the tooltip manager to "tooltipify" dynamically added controls.  I would think the answer is "yes", in which case, I must be doing something wrong...

I'll check into the 3rd option you presented.

Thanks Much,
Brent

[Brent Hetland]

Hi Marin,

Here was my resolution.  All I did was:

1)  Add another RadToolTipManager, as follows:

		<telerik:RadToolTipManager ID="BVAutoRadToolTipManager" runat="server" ToolTipZoneID="tooltipZoneDiv" AutoTooltipify="True">
		</telerik:RadToolTipManager>

2)  Add a <div> tag around my dynamically built asp table, as follows:

	<div id="tooltipZoneDiv">
		<asp:Table ID="tblBowlerTop" runat="server" CssClass="bowler" EnableViewState="false" />
	</div>

NOTE:  Before knowing that this was all I had to do, I had also added the following javascript:

			function tooltipifyBowlerPage() {
				var BVAutoRadToolTipManager = $find("<%=BVAutoRadToolTipManager.ClientID %>");
				var tooltipZoneDiv = $get("tooltipZoneDiv");
				BVAutoRadToolTipManager.tooltipify(tooltipZoneDiv);
			}
 
			Sys.Application.add_load(tooltipifyBowlerPage);

 BUT THE PROBLEM that I ran into then, was that the tooltips had no content.  They were blank.

Anyway, getting rid of that javascript and just doing steps 1 and 2 above, have solved my problem.

Thanks,
Brent