Design a ToolTip contains many controls.

[Velkumar]

Hai,

     I have 5 images in my page and i want to display the tooltip for each image. The tooltip should contains an image, 4 labels,4 textboxes, 2 buttons. How can i create this type of tooltips.

Thanks,
Velkumar.

[Princy]

Hello,

Take a look into the following demo which explained the same.
ToolTip / Load on Demand

Thanks,
Princy

[Svetlina Anati]

Hello Velkumar,

 
What Princy suggested will work but if you do not really need LOD functionality you could use simple, separate static tooltips. In this case you will not need such complex configuration and you will also skip the AJAX request when showing the tooltip.

To do so, you can declare a tooltip for each image and put whatever controls you want between the opening and closing tags exactly in the same manner as you would do with e.g a simple asp panel, e.g as shown below:

<telerik:RadToolTip runat="server" ID="RadToolTip2" ShowEvent="OnClick" ShowDelay="0"
                        HideEvent="ManualClose" Width="300px" Position="MiddleRight" RelativeTo="Element"
                        TargetControlID="myTarget" EnableShadow="true">

                                    <asp:Label ID="lbl1" runat="server" Text="My label"></asp:Label>
                                <asp:Image ID="img" ImageUrl="myUrl"><asp:Image>
....................

                    </telerik:RadToolTip>

Sample usage is shown on some of our online demos, e.g the one below:

http://demos.telerik.com/aspnet-ajax/tooltip/examples/clientsideapi/defaultcs.aspx

At last, to get a better understanding on the differences between radToolTip and RadToolTipmanager, I recommend to examine this demo:

http://demos.telerik.com/aspnet-ajax/tooltip/examples/tooltipversustooltipmanager/defaultcs.aspx

and to determine which approach fits better your exact scenario and preferences.

I hope that the provided information is helpful, let me know how it goes or in case you have additional questions.

All the best,
Svetlina Anati
the Telerik team

[Velkumar]

Hai ,

    I want to create that tooltip completely in server side. How can i create it?

Thanks,
Velkumar.

[Svetlina Anati]

Hello,

 You can create and add the tooltip and its content controls the very same manner as you would do with any other container server control, e.g as shown below:

//create tooltip
         RadToolTip tip = new RadToolTip();
         //set properties
         tip.RelativeTo = ToolTipRelativeDisplay.Element;
         //.....
         //create controls - label, image, etc
         Label lbl = new Label();
         lbl.Text = "Sample text";
         //....
         //add controls to tooltip
         tip.Controls.Add(lbl);
         //....
         //add tooltip to form
         this.form1.Controls.Add(tip);

All the best,
Svetlina Anati
the Telerik team

[Velkumar]

hai,

Thanks,  I will send the feedback after checking it.

Thanks,
Velkumar

[Velkumar]

Hai,

    I am creating a asp repeater for displaying images. 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 add the Code below,

protected Repeater ImageRepeater;


    ImageRepeater.ItemTemplate = new ImageTemplate();
            ImageRepeater.DataSource = ImageTable;
            ImageRepeater.DataBind();


class ImageTemplate : ITemplate
    {
        public ImageTemplate()
        { }

        public void InstantiateIn(System.Web.UI.Control container)
        {
            Image Img = 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);

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

Thanks,
Velkumar.

[Svetlina Anati]

Hi Velkumar,

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

[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,

I have just answered your other thread on the same matter and below you can find my answer as well. In the future please post only one thread per issue as this helps tracking the progress of the matter and also prevents important information posted in one thread to be omitted in the other.

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

[Velkumar]

Hi,

If  I add the any control in  the container from inside databinding then the reapeater with images  will not be loaded. I find this by viewing the page source of the page.

Thanks
Velkumar

[Marin Bratanov]

Hello Velkumar,

You can then try adding the RadToolTip to your template (and you can also set most of its properties there) while leaving only the TargetControlID property to the databound event of the image, so that you make sure the controls are already added to their containers the have the correct ClientIDs.


Greetings,
Marin
the Telerik team