Image div has display:none style when rendered

3 posts, 0 answers
  1. Geoff
    Geoff avatar
    27 posts
    Member since:
    May 2012

    Posted 23 Apr 2014 Link to this post

    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();

    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">

    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.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 24 Apr 2014 in reply to Geoff Link to this post

    Hi Geoff,

    Please have a look into this online demo to show an Image on the RadToolTip.

    Let me know if you have any concern.
  3. Marin Bratanov
    Marin Bratanov avatar
    4441 posts

    Posted 28 Apr 2014 Link to this post

    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:

    Otherwise, you should use a RadToolTip control instead, as shown here: 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:


    Marin Bratanov

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top