RAD ToolTip Help on Image Hotspots

4 posts, 2 answers
  1. Joseph
    Joseph avatar
    7 posts
    Member since:
    May 2008

    Posted 03 Nov 2010 Link to this post

    Hi,

    I want to create a webpage which contains an imagemap with hotspots. On mouse move over the hotspots I want to display a tool tip, not just the alt.Text, but rather more information with another image and some text. I was following the RadToolTip demo (First Look) and adapted the same method to create this. But it is not working. I am attaching the code (only two web pages). Please some one take a look and tell me what I am doing wrong.  The tool tip information is not pulled from any database but generated in the codebehind file based on the ID of the hotspot.

    Since I spend almost a week playing with it with out any luck, any help is greately appreciated,
    Thanks
    Joe

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DefaultCS.aspx.cs" Inherits="tooltiptest.DefaultCS" %>
      
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register Src="LocSummary.ascx" TagName="LocSummary" TagPrefix="uc1" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <head>
    <title></title>
          
        <style type="text/css">
            .test
            {
                float: right;
            }
        </style>
    </head>
      
    <body class="BODY">
        <form id="form1" runat="server">
         
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
        </telerik:RadStyleSheetManager>
         
       <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <h1> Our Locations </h1>
          
         
            <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" 
            Skin="Forest" DecoratedControls="All" />
      
              <div id="mainimgdiv" style=" width:800px; height:500px">
                  
                 <asp:imageMap ID="cdslocations" runat="server" 
                    ImageUrl="cdslocs.jpg"   
                    HotSpotMode="PostBack"  Enabled="true" ViewStateMode="Enabled"
                        
                    
      
                </asp:imageMap>
      
                      
                    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"  ></telerik:RadAjaxLoadingPanel>
      
                    
                     <telerik:RadToolTipManager runat="server" AnimationDuration="300" ShowDelay="200"
                EnableShadow="True" HideDelay="1" ID="RadToolTipManager1" Width="453px" Height="210px"
                RelativeTo"BrowserWindow" Animation= "Slide" OnAjaxUpdate="OnAjaxUpdate"
                Skin="Telerik" Title = "Location Summary:" />
      
                <telerik:RadAjaxManager ID ="RadAjaxManager1" runat="server">
                    <AjaxSettings>
                        <telerik:AjaxSetting AjaxControlID="RadToolTipManager1">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" 
                                    LoadingPanelID="RadAjaxLoadingPanel1" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                    </AjaxSettings>
                </telerik:RadAjaxManager>
               
            </div>
        </form>
    </body>
    </html>
      
    Code behind
      
    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using Telerik.Web.UI;
    using System.Threading;
    using System.IO;
    using Telerik;
      
    namespace tooltiptest
    {
        public partial class DefaultCS : System.Web.UI.Page
        {
             
            protected void Page_Load(object sender, EventArgs e)
            {
      
                // define the circle hotspot
                CircleHotSpot Circle1 = new CircleHotSpot();
                Circle1.HotSpotMode = HotSpotMode.PostBack;
                Circle1.NavigateUrl = "~/northnj.aspx";
                Circle1.X = 458;
                Circle1.Y = 120;
                Circle1.Radius = 15;
                Circle1.AlternateText = "WH";
                  
                // Add Circle1 to the ImageMap's HotSpotCollection.    
                cdslocations.HotSpots.Add(Circle1);
                 
      
                
                CircleHotSpot Circle2 = new CircleHotSpot();
                Circle2.HotSpotMode = HotSpotMode.PostBack;
               // Circle2.NavigateUrl = "~/lehighvalley.aspx";
                Circle2.X = 433;
                Circle2.Y = 128;
                Circle2.Radius = 15;
                Circle2.AlternateText = "AT";
                cdslocations.HotSpots.Add(Circle2);
      
                CircleHotSpot Circle3 = new CircleHotSpot();
                Circle3.HotSpotMode = HotSpotMode.PostBack;
               // Circle3.NavigateUrl = "~/fortwayne.aspx";
                Circle3.X = 352;
                Circle3.Y = 143;
                Circle3.Radius = 15;
                Circle3.AlternateText = "BF";
                cdslocations.HotSpots.Add(Circle3);
      
                CircleHotSpot Circle4 = new CircleHotSpot();
                Circle4.HotSpotMode = HotSpotMode.PostBack;
               // Circle4.NavigateUrl = "~/stlouis.aspx";
                Circle4.X = 317;
                Circle4.Y = 172;
                Circle4.Radius = 15;
                Circle4.AlternateText = "EV";
                  
                cdslocations.HotSpots.Add(Circle4);
      
                CircleHotSpot Circle5 = new CircleHotSpot();
                Circle5.HotSpotMode = HotSpotMode.PostBack;
                //Circle5.NavigateUrl = "~/tulsa.aspx";
                Circle5.X = 263;
                Circle5.Y = 208;
                Circle5.Radius = 15;
                Circle5.AlternateText = "FG";
                cdslocations.HotSpots.Add(Circle5);
      
                CircleHotSpot Circle6 = new CircleHotSpot();
                Circle6.HotSpotMode = HotSpotMode.PostBack;
                //Circle6.NavigateUrl = "~/losangelos.aspx";
                Circle6.X = 49;
                Circle6.Y = 203;
                Circle6.Radius = 15;
                Circle6.AlternateText = "ON";
               
                cdslocations.HotSpots.Add(Circle6);
      
                foreach (CircleHotSpot spot in cdslocations.HotSpots)
                {
                    //The first argument of add method requires the client Id 
                    //the example implementation will set the id to be the name of the country itself
                  this.RadToolTipManager1.TargetControls.Add(spot.AlternateText, spot.AlternateText, true);              
                }            
            }
            protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)
            {
                this.UpdateToolTip(args.Value, args.UpdatePanel);
            }
            private void UpdateToolTip(string elementID, UpdatePanel panel)
            {
                Control ctrl = Page.LoadControl("LocSummary.ascx");
                panel.ContentTemplateContainer.Controls.Add(ctrl);
                LocSummary details = (LocSummary)ctrl;
                details.LocId = elementID;
                  
            }
      
        }
    }
      
    LocSummary ASpx  - this is a user control file which should show as tooltip
      
      
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="LocSummary.ascx.cs" Inherits="tooltiptest.LocSummary" %>
    <asp:FormView ID="LocView" DataKeyNames="LocId"
        runat="server" OnDataBound="LocView_DataBound" Width="453px" 
        onpageindexchanging="LocView_PageIndexChanging" CellPadding="4" 
        ForeColor="#333333">
        <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
        <ItemTemplate>
            <div style="float: left; border: 1px solid #999999; margin-right: 20px; width: 200px;
                height: 200px; background-position: center; background-repeat: no-repeat;" >
                <asp:Image ID="LocImage"  runat="server" />
            </div>
            <div style="width: 200px; float: left;">
                <div style="float: left; padding-top: 20px;">
                    <asp:Label CssClass="info" ID="LocationName" runat="server" Style="font-size: 24px; padding-left: 4px;"></asp:Label>
      
                    <br />
                    <br />
                    <span class='title' style="color: #c98400">Highways:</span>
                    <asp:Label CssClass="info" ID="LbHigways" runat="server"></asp:Label>
                    <br />
                    <span class='title' style="color: #c98400">Squre Foot:</span>
                    <asp:Label CssClass="info" ID="LbSqFoot" runat="server"></asp:Label>
                    <br />
                    <span class='title' style="color: #c98400">Construction:</span>
                    <asp:Label CssClass="info" ID="LbConstruction" runat="server"></asp:Label>
                    <br />
                </div>
            </div>
        </ItemTemplate>
        <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
        <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
    </asp:FormView>
      
    Code behind
      
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Threading;
    using System.IO;
      
    namespace tooltiptest
    {
        public partial class LocSummary : System.Web.UI.UserControl
        {
             public string LocId
            {
                get
                {
                    if (ViewState["LocId"] == null)
                    {
                        return "";
                    }
                    return (string)ViewState["LocId"];
                }
                set
                {
                    ViewState["LocId"] = value;
                }
            }
            protected void LocView_PageIndexChanging(object sender, FormViewPageEventArgs e)
            {
            }
      
            protected void Page_Load(object sender, EventArgs e)
            {
                this.DataBind();
            }
      
            protected void LocView_DataBound(object sender, EventArgs e)
            {
      
                string lcID = e.ToString();
                string locName = "" ;
                string locHigWays = "";
                string locSqFoot = "";
                string locConstruction = "";
                string lcImageUrl = ""; 
                switch (LocId)
                {
      
                    case "WH":
                        locName = "Wharton, NJ";
                        locHigWays = "80/46";
                        locSqFoot = "650000";
                        locConstruction = "Concrete";
                        lcImageUrl = "smallloc.png";
                        break;
                    case "PA":
                        locName = "Pensilvania, PA";
                        locHigWays = "80/78";
                        locSqFoot = "650000";
                        locConstruction = "Concrete";
                        lcImageUrl = "smallloc.png";
                        break;
                    case "CA":
                        locName = "Ontario, CA";
                        locHigWays = "100/80/35";
                        locSqFoot = "350000";
                        locConstruction = "Concrete";
                        lcImageUrl = "smallloc.png";
                        break;
                    case "BF":
                        locName = "Bluffton, IN";
                        locHigWays = "200/145";
                        locSqFoot = "150000";
                        locConstruction = "Concrete";
                        lcImageUrl = "smallloc.png";
                        break;
                    case "IL":
                        locName = "Edwardsville, IL";
                        locHigWays = "66/77";
                        locSqFoot = "650000";
                        locConstruction = "Steel";
                        lcImageUrl = "smallloc.png";
                        break;
      
                    case "FG":
                        locName = "Fort Gibson, OK";
                        locHigWays = "35/76";
                        locSqFoot = "450000";
                        locConstruction = "Steel";
                        lcImageUrl = "smallloc.png";
                        break;
                    default:
                        locName = "Wharton, NJ";
                        locHigWays = "80/78";
                        locSqFoot = "650000";
                        locConstruction = "Concrete";
                        lcImageUrl = "smallloc.png";
                        break;
                }
                //populate the summary information of the location
                System.Web.UI.WebControls.Image image = (System.Web.UI.WebControls.Image)this.FindControl("LocImage");
                if (image == null) return;
                if (!File.Exists(MapPath(image.ImageUrl)))
                {
      
                    image.ImageUrl = lcImageUrl;
                }
                System.Web.UI.WebControls.Literal lit1 = (System.Web.UI.WebControls.Literal)this.FindControl("LocationName");
                lit1.Text = locName;
                System.Web.UI.WebControls.Literal lit2 = (System.Web.UI.WebControls.Literal)this.FindControl("LbHigways");
                lit2.Text = locHigWays;
                System.Web.UI.WebControls.Literal lit4 = (System.Web.UI.WebControls.Literal)this.FindControl("LbSqFoot");
                lit1.Text = locSqFoot;
                System.Web.UI.WebControls.Literal lit5 = (System.Web.UI.WebControls.Literal)this.FindControl("LbConstruction");
                lit1.Text = locConstruction;
                 
            }
        }
    }
  2. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 09 Nov 2010 Link to this post

    Hello Joseph,

     I built up a test demo based on your code and I was able to reproduce the problem. It comes from the fact that you actually add IDs to the TargetControls collection but you never set those IDs to the actual hotspots. As a result, the tooltip manager is correctly configured but there are no such targets specified on the page.

    In order to get the desired result you should set an ID attribute to each hotspot. Since this cannot be done from code-behind you should use some javascript as it is done in our online demo. For your case you can use e.g the following code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <head>
        <title></title>
        <style type="text/css">
            .test
            {
                float: right;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
        </telerik:RadStyleSheetManager>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <h1>
            Our Locations
        </h1>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Forest" DecoratedControls="All" />
        <div id="mainimgdiv" style="width: 800px; height: 500px">
            <asp:ImageMap ID="cdslocations" runat="server" ImageUrl="~/NewFolder1/MapOfEurope.jpg"
                HotSpotMode="PostBack" Enabled="true" ViewStateMode="Enabled">
            </asp:ImageMap>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
            </telerik:RadAjaxLoadingPanel>
            <telerik:RadToolTipManager runat="server" AnimationDuration="300" ShowDelay="200"
                EnableShadow="True" HideDelay="1" ID="RadToolTipManager1" Width="453px" Height="210px"
                RelativeTo="BrowserWindow" Animation="Slide" OnAjaxUpdate="OnAjaxUpdate" Skin="Telerik"
                Title="Location Summary:" IgnoreAltAttribute="true" />
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadToolTipManager1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
      
            <script type="text/javascript">
                //<![CDATA[
                //IMPORTANT!: On the client the ASP.NET framework prepends the actual map element with the prefix "ImageMap"
                var map = document.getElementsByName("ImageMapcdslocations")[0];
                var areas = map.getElementsByTagName("AREA");
                for (var i = 0; i < areas.length; i++) {
                    var area = areas[i];
                    var id = area.getAttribute("alt");
                    area.style.border = "3px solid red";
                    area.setAttribute("id", id);
      
                    //Prevent from postbacking the page 
                    area.onclick = function(e) { return false; };
                    //remove the alt attribute to prevent the browser's tooltip from showing
                    area.removeAttribute("alt");
                    area.removeAttribute("title");
                }
      
                //]]> 
            </script>
      
        </div>
        </form>
    </body>
    </html>


    Note, that the script should be registered at last on the page or you should ensure that the map is created and loaded so that you can manipulate it in javascript.

    I hope that my reply is helpful and for your convenience I attached your modified demo, let me know how it goes.

    Best wishes,
    Svetlina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joseph
    Joseph avatar
    7 posts
    Member since:
    May 2008

    Posted 17 Dec 2010 Link to this post

    Thanks for the reponse and it is working the way you described. But when I moved the code to master page - content page set up the tool tips are not appearing anymore. If I put the imagemap and RadTooltipmanger in the master page it will work, but if I place them in the content page it do not work. Am I missing something here.  I have created another support ticket with attachement for this purpose, so I am not attaching the files here.

    Thanks
    Joseph
  5. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 20 Dec 2010 Link to this post

    Hi Joseph,

     I already answered your other thread and for your convenience and for others who might have the same problem I pasted my reply below:

    Thank you for the provided files, I examined them and I was able to reproduce the problem.

    The issue you face comes from the fact that when you put the map on the content page, you put it in an INaming Container which changes its ID to be as follows:

    ImageMapContentPlaceHolder1_ImageMap1

    That is why to achieve what you need you should make sure you have correctly referenced the map - otherwise a js error is thrown and after this happens, unexpected behavior occurs (e.g tooltips do not show).

    All the best,
    Svetlina
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top