Tooltip Not Working

[Velkumar]

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.

[Svetlina Anati]

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

 

All the best,
Svetlina Anati
the Telerik team

[Velkumar]

Hi,

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

Thanks,
Velkumar

[Velkumar]

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.

[Marin Bratanov]

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