New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

RadToolTipManager with ImageMap

MapOfEurope AustriaBelgiumDenmarkFinlandFranceGermanyIrelandItalyNorwayPolandPortugalSpainSwedenSwitzerlandUK

This example shows how to use RadToolTipManager with asp:ImageMap control.
When you open a tooltip and make a WebService request to load particular content in the RadToolTip, based on the current hotspot.
The WebService class for this example is named ToolTipWebService.cs and can be found in the demo's App_Code folder.

Please, note that the image map renders content which is not XHTML compliant (due to the way the ID is formed and also the name attribute of the map) - that is why the demo will not successfully pass validation and the RadToolTip control is not the reason for it but the standard image map.

Note: Since the target areas are not real separate elements, the tooltip should be configured to be relative to the mouse.

In this particular case we use the Northwind database to fetch the list of customers from the given country when you hover over it on the map. This list is loaded in an asp:Repeater. Click on a customer name in the RadToolTip and a RadWindow will be opened that contains the orders sent by this customer presented in RadGrid.
  • DefaultCS.aspx
    • DefaultCS.aspx
    • DetailsView.aspx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • DetailsView.aspx.cs
    • ToolTipWebService.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.ImageMapToolTipManager.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide no-bg">
        <telerik:RadWindowManager RenderMode="Lightweight" Skin="Telerik" ID="RadWindowManager1" Modal="true" runat="server"
            Width="650" Height="600" VisibleStatusbar="false" Style="z-index: 31000" DestroyOnClose="true"
            OnClientPageLoad="telerikDemo.adjustSize">
        </telerik:RadWindowManager>
        <asp:ImageMap ID="MapOfEurope" ImageUrl="images/MapOfEurope.jpg" runat="server" AlternateText="MapOfEurope">
            <asp:PolygonHotSpot AlternateText="Austria" Coordinates="418,383,414,390,427,398,437,400,452,395,463,402,489,404,509,398,521,389,522,377,528,371,525,361,523,351,498,347,488,357,477,357,472,364,465,370,473,385,458,380,443,385,418,383"></asp:PolygonHotSpot>
            <asp:PolygonHotSpot AlternateText="Belgium" Coordinates="361,333,367,319,357,299,343,293,330,297,325,294,316,299,341,325,361,333"></asp:PolygonHotSpot>
            <asp:PolygonHotSpot AlternateText="Denmark" Coordinates="400,214,446,223,454,215,453,196,449,189,433,193,426,200,420,194,426,187,433,180,423,176,424,170,427,158,423,152,414,159,408,166,400,167,396,178,395,190,397,201,400,214"></asp:PolygonHotSpot>
            <asp:PolygonHotSpot AlternateText="Finland" Coordinates="550,-7,540,17,536,29,541,43,546,62,548,78,569,89,593,76,618,64,634,31,643,8,641,-2,550,-7"></asp:PolygonHotSpot>
            <asp:PolygonHotSpot AlternateText="France" Coordinates="380,468,383,462,369,452,373,444,367,438,375,432,369,420,373,417,357,413,364,391,381,380,393,350,342,327,313,299,299,301,293,320,275,323,271,333,247,318,247,343,225,334,199,338,201,359,227,372,238,399,242,418,233,455,227,463,253,482,283,491,310,496,310,480,323,473,357,484,369,480,380,468"></asp:PolygonHotSpot>
            <asp:PolygonHotSpot AlternateText="Germany" Coordinates="380,246,381,264,375,269,378,277,369,284,364,284,366,297,363,307,368,316,365,329,369,338,394,349,383,379,399,376,415,383,427,381,445,382,455,378,469,381,464,370,474,356,478,352,458,331,455,318,487,303,487,288,479,255,476,238,454,225,417,220,401,216,403,237,394,245,380,246"></asp:PolygonHotSpot>
            <asp:PolygonHotSpot AlternateText="Ireland" Coordinates="159,197,157,206,161,209,154,214,166,223,152,235,140,242,143,256,161,261,180,253,195,255,203,240,206,228,204,216,214,212,217,203,214,191,209,187,200,182,184,184,178,192,184,196,177,199,168,198,159,197"></asp:PolygonHotSpot>
            <asp:PolygonHotSpot AlternateText="Italy" Coordinates="386,467,380,459,373,452,375,445,371,439,375,432,373,418,388,420,396,414,404,424,415,411,425,414,432,401,443,399,453,397,466,404,477,406,477,421,462,430,462,454,481,471,506,504,526,505,530,510,522,516,572,541,570,550,546,540,538,555,552,562,534,599,517,629,497,621,469,608,470,599,491,596,518,592,527,582,530,575,519,552,494,533,474,526,455,510,426,486,422,467,401,456,386,467"></asp:PolygonHotSpot>
            <asp:PolygonHotSpot AlternateText="Norway" Coordinates="460,-4,460,5,450,6,443,15,441,26,441,34,445,49,443,61,451,70,447,77,443,79,448,91,446,102,441,104,439,111,440,125,434,124,431,121,426,110,426,117,419,123,401,140,386,145,374,136,367,125,364,101,364,74,365,55,379,42,393,28,407,16,414,17,424,-2,460,-4"></asp:PolygonHotSpot>
            <asp:PolygonHotSpot AlternateText="Poland" Coordinates="479,235,492,306,508,311,517,321,524,315,533,315,534,321,544,324,556,333,561,328,567,336,576,331,590,328,608,330,607,319,620,300,619,289,610,273,607,262,603,259,609,247,599,217,591,213,570,217,546,218,535,219,532,213,523,210,510,216,500,225,479,235"></asp:PolygonHotSpot>
            <asp:PolygonHotSpot AlternateText="Portugal" Coordinates="103,472,113,470,117,472,115,478,120,477,129,480,135,479,141,481,140,487,147,490,133,498,129,513,124,519,126,524,121,529,114,528,116,534,120,545,114,549,110,557,115,564,105,571,102,589,93,587,86,582,73,581,79,572,83,563,81,561,86,552,83,547,79,549,78,541,75,538,83,524,90,515,100,499,102,483,103,472"></asp:PolygonHotSpot>
            <asp:PolygonHotSpot AlternateText="Spain" Coordinates="102,442,105,468,114,470,119,476,141,478,144,486,149,489,134,499,126,518,126,526,118,531,121,543,111,556,116,564,106,572,103,584,118,595,123,613,133,619,150,611,161,608,189,614,198,613,213,601,225,599,234,583,248,574,240,556,262,531,270,524,291,519,308,507,310,496,288,493,245,480,225,462,163,445,139,437,129,435,115,442,102,442"></asp:PolygonHotSpot>
            <asp:PolygonHotSpot AlternateText="Sweden" Coordinates="460,-2,460,5,450,8,442,23,443,41,445,59,451,68,447,80,448,100,440,113,441,125,434,126,438,144,448,168,452,189,461,206,475,204,484,186,497,186,507,162,504,128,518,118,526,97,503,81,499,60,501,38,512,21,531,4,532,0,460,-2"></asp:PolygonHotSpot>
            <asp:PolygonHotSpot AlternateText="Switzerland" Coordinates="428,400,415,392,414,384,400,378,375,383,363,397,358,414,373,415,377,420,388,420,396,410,404,422,413,408,423,411,429,406,428,400"></asp:PolygonHotSpot>
            <asp:PolygonHotSpot AlternateText="UK" Coordinates="225,116,214,143,222,179,226,198,244,207,244,235,226,232,221,250,209,265,231,282,193,302,204,308,225,306,291,302,302,293,309,263,291,252,287,233,282,216,275,209,271,187,262,175,267,164,275,145,250,138,274,117,244,113,225,116"></asp:PolygonHotSpot>
        </asp:ImageMap>
    </div>
    <telerik:RadToolTipManager RenderMode="Lightweight" ID="RadToolTipManager1" Style="z-index: 1000" ShowCallout="true"
        RelativeTo="Mouse" HideEvent="LeaveToolTip" Position="BottomCenter" Animation="Fade"
        Width="180px" Height="150px" ContentScrolling="Auto" runat="server" Skin="Default"
        RenderInPageRoot="true">
        <WebServiceSettings Method="GetCustomersByCountry" Path="ToolTipWebService.asmx"></WebServiceSettings>
    </telerik:RadToolTipManager>
    <script src="scripts.js" type="text/javascript"></script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance