Adding tooltip programmatically

[Alex]

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>

[Tsvetie]

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

[Alex]

Thanks, Tsvetie. I got it working :)

[Alex]

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.

[Georgi Tunev]

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

[Alex]

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