Adding tooltip programmatically

6 posts, 0 answers
  1. Alex
    Alex avatar
    37 posts
    Member since:
    Oct 2007

    Posted 22 Jan 2008 Link to this post

    Hi. I'm using an asp:ImageMap control (as shown below) and would like to create a RadToolTip for each ImageMap item (PolygonHotSpot), and use the AlternateText of the PolygonHotSpot to set the Text of the RadToolTip. Then the RadToolTip needs to be added to the page's controls. How do I do this in the code-behind using C#? Thank you.

            <asp:ImageMap ID="ImageMap1" runat="server" HotSpotMode="NotSet" ImageUrl="NC-USA-113196.gif" > 
                <asp:PolygonHotSpot Coordinates="531,235,531,231,529,228,529,225,530,221,528,218,526,214,522,211,519,213,515,216,511,215,508,211,507,207,504,203,502,202,501,203,497,204,497,206,496,207,494,206,493,204,490,206,488,204,487,201,485,199,483,200,477,254,526,255,528,250,532,245,533,240,531,235,531,235"  AlternateText="Anson" /> 
                <asp:PolygonHotSpot Coordinates="483,200,479,202,474,204,472,203,471,204,466,204,463,205,460,204,457,203,456,202,456,201,452,198,434,215,426,222,421,224,416,227,421,233,422,239,421,254,477,254,483,200,483,200,483,200"  AlternateText="Union" /> 
                <asp:PolygonHotSpot Coordinates="561,254,562,253,562,251,562,248,565,245,567,243,568,241,567,236,566,233,567,230,573,226,580,223,580,223,575,219,570,219,567,218,566,215,566,211,562,205,557,205,550,203,535,203,529,205,520,206,513,208,509,208,507,206,507,207,508,211,511,215,515,216,519,213,522,211,526,214,528,218,530,221,529,225,529,228,531,231,531,235,533,240,532,245,528,250,526,255,526,255,554,256,557,254,561,254,561,254"  AlternateText="Richmond" /> 
            </asp:ImageMap> 
     





  3. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 23 Jan 2008 Link to this post

    Hello Alex ,
    Regarding the integration of RadToolTip and ImageMap controls, please refer to the following forum thread: Using TooltipManager with Hotspots  - please use it as a base and extend it further to fit your requirements.

    Please, note that in     MasterPage-Content Page / Parent page - user controls scenarios, the IDs of the controls are changed - this is not related to the RadToolTip control but the way ASP.NET works.

    To modify the code to work as expected, you need to provide the ClientID of the ImageMap control:

    var map = document.getElementsByName("ImageMap" + "<%=ImageMap1.ClientId%>")[0];


    As for creating the RadToolTip controls in the code-behind, you should have no problems, just create the controls and add them to the Controls collection of the page.

    Greetings,
    Tsvetie
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. Alex
    Alex avatar
    37 posts
    Member since:
    Oct 2007

    Posted 23 Jan 2008 Link to this post

    Thanks, Tsvetie. I got it working :)
  7. Alex
    Alex avatar
    37 posts
    Member since:
    Oct 2007

    Posted 23 Jan 2008 Link to this post

    Issue in Firefox 2: I set the ShowEvent="OnClick", and click the hotspot, it begins to load the tooltip but then reloads the page. Any thoughts on how to prevent this reload from happening? The OnMouseOver works as expected. Thanks.
  9. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 24 Jan 2008 Link to this post

    Hi Alex,

    This behavior comes from the fact that when you set HotSpotMode to Navigate in the ImageMap control, clicking on the hotspots will initiate a postback. In IE, the RadToolTip control manages to cancel the postback, however in Firefox this is not possible. That is why we suggest to use the following workaround:

    <asp:ScriptManager ID="ScriptManager1" runat="server">  
    </asp:ScriptManager> 
    <asp:ImageMap ID="ImageMap1" runat="server"   
     
    HotSpotMode="Navigate"   
     
    ImageUrl="~/MyImage.jpg">  
        <asp:PolygonHotSpot Coordinates="128,185,335,157,510,224,510,383,228,383"></asp:PolygonHotSpot> 
        <asp:RectangleHotSpot Left="10" Top="10" Bottom="50" Right="50" /> 
    </asp:ImageMap> 
    <telerik:RadToolTip ShowEvent="OnClick" ID="tooltip" runat="server" TargetControlID="area0" 
        IsClientID="true" Text="I am a tooltip over a PolygonHotSpot">  
    </telerik:RadToolTip> 
    <telerik:RadToolTip ShowEvent="OnClick" ID="tooltip1" runat="server" TargetControlID="area1" 
        IsClientID="true" Text="I am a tooltip over a RectangleHotSpot">  
    </telerik:RadToolTip> 
     
    <script type="text/javascript">    
         var map = document.getElementsByName("ImageMapImageMap1")[0];      
         var areas = map.getElementsByTagName("AREA");     
              
         for (var i = 0; i < areas.length; i++)     
         {     
            var area = areas[i];     
            area.setAttribute("id", "area" + i);         
            //Prevent from postbacking the page  
            area.onclick = function(e){return false;};  
         }     
    </script> 


    Regards,
    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  11. Alex
    Alex avatar
    37 posts
    Member since:
    Oct 2007

    Posted 24 Jan 2008 Link to this post

    Thanks, Georgi. That works perfectly. You all know your stuff :)
Back to Top