Design a ToolTip contains many controls.

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

    Posted 31 Jan 2012 Link to this post

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

    Posted 31 Jan 2012 Link to this post

    Hello,

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

    Thanks,
    Princy
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 31 Jan 2012 Link to this post

    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
    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
  5. Velkumar
    Velkumar avatar
    85 posts
    Member since:
    Apr 2011

    Posted 31 Jan 2012 Link to this post

    Hai ,

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

    Thanks,
    Velkumar.
  6. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 31 Jan 2012 Link to this post

    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
    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
  7. Velkumar
    Velkumar avatar
    85 posts
    Member since:
    Apr 2011

    Posted 31 Jan 2012 Link to this post

    hai,

    Thanks,  I will send the feedback after checking it.

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

    Posted 31 Jan 2012 Link to this post

    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.
  9. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 01 Feb 2012 Link to this post

    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
    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
  10. 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.
  11. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 08 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  12. Velkumar
    Velkumar avatar
    85 posts
    Member since:
    Apr 2011

    Posted 08 Feb 2012 Link to this post

    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
  13. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 10 Feb 2012 Link to this post

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