Tooltip Not Working

5 posts, 0 answers
  1. Velkumar
    Velkumar avatar
    85 posts
    Member since:
    Apr 2011

    Posted 01 Feb 2012 Link to this post

    Hai,

        I am creating a asp repeater for displaying images dynamically. The asp Repeater is created from server side. I have used asp image for displaying the image in the repeater. Now i have to show the tooltip for each image. The tooltip contains that same image in LargeSize. I created the repeater dynamically.
                                         Also dynamically add the image control in repeater. I used the Itemtemplate for add the  asp image control. Now i have to show the tooltip  for each image dynamically. How can i add this tooltip fro this images, which is added in template.

    I added the code below.
    protected Repeater ImageRepeater;     
      
      
        ImageRepeater.ItemTemplate = new ImageTemplate();
                ImageRepeater.DataSource = ImageTable;
                ImageRepeater.DataBind();
      
      
    class ImageTemplate : ITemplate
        {
            Image ToolImg ;
            RadToolTip ImgToolTip; 
     
            public ImageTemplate()
            { }
        
            public void InstantiateIn(System.Web.UI.Control container)
            {
                Image Img = new Image ();
                ToolImg = new Image ();
     
                Img.DataBinding += new EventHandler(Img_DataBinding);
      
                LiteralControl StartDiv = new LiteralControl("<div style=\"float: left; padding-left:10px;\">");
                container.Controls.Add(StartDiv);
                container.Controls.Add(Img);
     
              ImgToolTip = new RadToolTip();
              
                ImgToolTip.Width = Unit.Pixel(300);
                ImgToolTip.Height = Unit.Pixel(300);
               ImgToolTip.TargetControlID= Img.ClientID;
               ImgToolTip.IsClientID = true;
               ImgToolTip.Controls.Add(ToolImg);
     
               container.Controls.Add(ImgToolTip);
      
                LiteralControl EndDiv = new LiteralControl("</div>");
                container.Controls.Add(EndDiv);
            }
      
            void Img_DataBinding(object sender, EventArgs e)
            {
                Image Img;
                Img = (Image )sender;
                RepeaterItem container = (RepeaterItem)Img.NamingContainer;
                Img.ImageUrl = "/_layouts/images/jobsarathyDemo/TempImages/"+DataBinder.Eval(container.DataItem, "ImageName").ToString();
     
                 ToolImg.ImageURL = "/_layouts/images/jobsarathyDemo/TempImages/" + DataBinder.Eval(container.DataItem, "ImageName").ToString();
            }
        }

    But it is not working.

    Thanks
    Velkumar.
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 01 Feb 2012 Link to this post

    Hello Velkumar,

    I already answered your other thread and for your convenience and for others who might have the same question I pasted my reply below:

    As I already explained, you can create and add the tooltip and its content controls in the very same manner you do with other server controls, e.g as shown below:

    void Img_DataBinding(object sender, EventArgs e)
    {
    Image Img;
    Img = (Image)sender;
    RepeaterItem container = (RepeaterItem)Img.NamingContainer;
    Img.ImageUrl = "/_layouts/images/jobsarathyDemo/TempImages/" + DataBinder.Eval(container.DataItem, "ImageName").ToString();
    RadToolTip tip = new RadToolTip();
    tip.RelativeTo = ToolTipRelativeDisplay.Element;
    tip.Controls.Add(new LiteralControl("Dynamically added controls"));
    tip.Width = Unit.Pixel(200);
    tip.Height = Unit.Pixel(200);
    tip.TargetControlID = Img.ClientID;
    tip.IsClientID = true;
    container.Page.Form.Controls.Add(tip);
    }

    Note, that in the code above I only demonstrated the same I already explained - if you need to change the properties settings, please do so there as shown. Also, I added a LiteralControl - you can add images, labels, etc controls in the same manner.

    For your convenience and reference I attach a sample page, let me know how it goes.

    Greetings,

    Svetlina Anati

    the Telerik team

    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

     

    All the best,
    Svetlina Anati
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Velkumar
    Velkumar avatar
    85 posts
    Member since:
    Apr 2011

    Posted 03 Feb 2012 Link to this post

    Hi,

               This code is not working. Now the image in the Repeater is not displayed.

    Thanks,
    Velkumar
  5. Velkumar
    Velkumar avatar
    85 posts
    Member since:
    Apr 2011

    Posted 08 Feb 2012 Link to this post

    Hai,

                         Now, If I add the tooltip in the  container "container.Page.Form.Controls.Add(tip);"  the images in the repeater is not displayed. If I comment this line the images will be displayed.

    Thanks,
    Velkumar.
  6. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 08 Feb 2012 Link to this post

    Hi Velkumar,

    This is some strange behavior. Please check your image URLs for errors. You can also examine the network requests to see if you simply get 404 for the images or you get some server error that is captured by your code (i.e. add a breakpoint and debug through it). Also, by examining the rendered HTML you will be able to see the actual URL your images render with so that you can check if it is correct and how it can be fixed if it isn't. As a last resort you can try adding the tooltips to the container of the image (i.e. container.Controls.Add(tip);) and set the tooltip's RenderInPageRoot property to true before that (tip.RenderInPageRoot = true;). I also strongly advise that you examine carefully the demo my colleague Svetlina sent you as it works correctly with us. Please compare it carefully with your actual code and try to locate the differences.



    All the best,
    Marin
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017