Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ToolTip > Design a ToolTip contains many controls.

• Velkumar

  Posted on Jan 31, 2012 (permalink)

  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.

  Reply

• Princy MVP

  Posted on Jan 31, 2012 (permalink)

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

  Reply


• Svetlina Anati Svetlina Anati

  Posted on Jan 31, 2012 (permalink)

  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

  Reply

• Velkumar

  Posted on Jan 31, 2012 (permalink)

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

  Reply

• Svetlina Anati Svetlina Anati

  Posted on Jan 31, 2012 (permalink)

  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

  Reply

• Velkumar

  Posted on Jan 31, 2012 (permalink)

  hai,
  
  Thanks,  I will send the feedback after checking it.
  
  Thanks,
  Velkumar

  Reply

• Velkumar

  Posted on Jan 31, 2012 (permalink)

  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.

  Reply

• Svetlina Anati Svetlina Anati

  Posted on Feb 1, 2012 (permalink)

  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

  Attached files

  • RadToolTipDemo.zip

  Reply

• Velkumar

  Posted on Feb 8, 2012 (permalink)

  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.

  Reply

• Marin Bratanov Marin Bratanov

  Posted on Feb 8, 2012 (permalink)

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

  Reply

• Velkumar

  Posted on Feb 8, 2012 (permalink)

  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

  Reply

• Marin Bratanov Marin Bratanov

  Posted on Feb 10, 2012 (permalink)

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

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ToolTip > Design a ToolTip contains many controls.