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;";
........................................