ToolTip / Image Gallery

Image Gallery

This example demonstrates how to organize an image gallery by using the RadToolTipManager control. The full size image is loaded in a tooltip and it has to be shown centered on the screen. However, when  each tooltip's content is with different size, the tooltip initially shows centered but after that it resizes itself according to the content's size and does not stay at the center.

You can avoid this side effect by cancelling the tooltip's show and then dynamically set its content before showing it again:

 var currentTooltip = null; function OnClientBeforeShow(sender, args)
{

                 //Hide the currently visible tooltip

                  if (currentTooltip)
                 {
                       if (currentTooltip != sender) currentTooltip.hide();
                       return;
                  }

                currentTooltip = sender; args.set_cancel(true);
}

function centerTooltip(img)
{
                if (currentTooltip)
               {
                     currentTooltip.set_contentElement(img);
            
                      //use the method updateLocation because it does not call WebService's method which loads the content 
                      currentTooltip.updateLocation();
                      currentTooltip = null;
                 }
}

The full size image is taken by using a WebService which WebMethod returns an image which executes the centerToolTip function when loaded:

 [WebMethod]
.......................................

Image img = new Image();
img.ImageUrl = String.Format("~/Tooltip/Img/Northwind/Flowers/{0}.jpg", imageID);
img.Attributes["onload"] = "centerTooltip(this);this.onload = null;";

........................................