Image div has display:none style when rendered

[Geoff]

I have a radtooltip that I am creating programmaticly       void radToolTip_DataBinding(object sender, EventArgs e)

void radToolTip_DataBinding(object sender, EventArgs e)
{
    System.Web.UI.WebControls.Image i = new System.Web.UI.WebControls.Image();
    i.ID = "toolTipImage";
    i.Height = 600;
    i.Width = 800;
    RadToolTipManager r = (RadToolTipManager)sender;
    r.ID = "radToolTip";
    radToolTip.TargetControls.Add(image.ClientID, true);
    GridDataItem container = (GridDataItem)r.NamingContainer;
    r.Animation = ToolTipAnimation.FlyIn;
    r.RelativeTo = ToolTipRelativeDisplay.Element;
    i.ImageUrl = ((DataRowView)container.DataItem)[colname].ToString();
    r.Text = i.ImageUrl.ToString();
    r.Title = ((DataRowView)container.DataItem)["Description"].ToString();
    r.Controls.Add(i);



}

However, when I run my page, and hover for the tooltip, the div containing the control image I added is showing "display:none;".

<div id="ctl00_MainPlaceHolder_SummaryGrid_ctl00_ctl14_radToolTip" style="display:none;position:absolute;">
<div id="ctl00_MainPlaceHolder_SummaryGrid_ctl00_ctl14_eflyerTooltipRTMPanel" style="display: block;"> </div>
<img id="ctl00_MainPlaceHolder_SummaryGrid_ctl00_ctl14_toolTipImage" style="height:600px;width:800px;" src="http://www.fakebutcorrecturl.jpg">
<input id="ctl00_MainPlaceHolder_SummaryGrid_ctl00_ctl14_radToolTip_ClientState" type="hidden" name="ctl00_MainPlaceHolder_SummaryGrid_ctl00_ctl14_radToolTip_ClientState">
</div>

All this is being done using a CustomTemplate Class that renders on a GridTemplateColumn on a radgrid.

I just need the image to show up inside the tooltip! Any help would be appreciated.

[Marin Bratanov]

Hello Geoff,

The wrapping div element of a RadToolTip should have display:none so it is only visible when needed. IT will remove it when it shows up and the image will be properly rendered in the popup, assuming the control is configured properly. More on that follows below.

If you are using a RadToolTipManager you should move it out of the grid because you only need one for that grid column, not one for each row. Then, you should add a target to its collection (I do not see what the image object is in the provided code snippet) and provide a proper load-on-demand mechanism, as shown here: http://demos.telerik.com/aspnet-ajax/tooltip/examples/targetcontrolsandajax/defaultcs.aspx?product=tooltip.

Otherwise, you should use a RadToolTip control instead, as shown here: http://demos.telerik.com/aspnet-ajax/tooltip/examples/tooltipversustooltipmanager/defaultcs.aspx. Thus, you can add controls to the standalone tooltip, because you cannot do that with a RadToolTipManager.

You also need to make sure the proper ShowEvent is configured so the tooltip knows when to show itself: http://demos.telerik.com/aspnet-ajax/tooltip/examples/showevent/defaultcs.aspx.


Regards,

Marin Bratanov
Telerik