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

Display Shape Tooltips in RadMap

Updated on Mar 2, 2026

How to

In this article you will see how to assign a dynamically created tooltip to the individual shapes/bubble in RadMap.

Solution

Disable the Kendo scripts shipped with the UI for ASP.NET AJAX suite like describe here.
Handle the Map's OnShapeMouseEnter in order to create the popup and assign the desired text value to it.
Handle the OnShapeMouseLeave event in order to hide the dynamically created popup

ASP.NET

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.3.1109/js/kendo.all.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableEmbeddedjQuery="false" ExternaljQueryUrl="https://code.jquery.com/jquery-1.12.3.min.js"></telerik:RadScriptManager>


        <script type="text/javascript">
            var $ = $ || $telerik.$;
            var popup;

            var markerData = [
                {
                    "Item": "1",
                    "Value": 3,
                    "Location": [42.7, 23.33],
                    "Description" : "Some description to shown in the tooltip 1"
                }, {
                    "Item": "2",
                    "Value": 2,
                    "Location": [42.7, 43.33],
                    "Description": "Some description to shown in the tooltip 2"
                }, {
                    "Item": "3",
                    "Value": 1,
                    "Location": [42.7, 60],
                    "Description": "Some description to shown in the tooltip 3"
                }
            ];


            function OnInitialize(sender, args) {
                var originalOptions = args.get_options();
                originalOptions.layers[1].dataSource = { data: markerData };
                args.set_options(originalOptions);

                // Use $telerik._kendo.jQuery for Kendo widget plugin methods
                var $k = $telerik._kendo.jQuery;
                popup = $k("<div>Foo</div>")
                    .appendTo(document.body)
                    .kendoPopup()
                    .data("kendoPopup");
            }
            function shapeMouseEnter(e) {
                var oe = e.originalEvent;
                var x = oe.pageX || oe.clientX;
                var y = oe.pageY || oe.clientY;
                
                var tooltipData = e.shape.dataItem.Description;
                popup.element.html(tooltipData);
                popup.open(x, y);
            }

            function shapeMouseLeave(e) {
                var $k = $telerik._kendo.jQuery;
                if (!$k(e.originalEvent.relatedTarget).is(".k-popup, .k-animation-container")) {
                    popup.close();

                    // Necessary to stop the animations,
                    // will be fixed in future versions
                    popup.element.kendoStop(true, true);
                }
            }
        </script>

        <telerik:RadMap RenderMode="Lightweight" runat="server" ID="RadMap1" Width="500px" Height="250px">
            <ClientEvents OnInitialize="OnInitialize" OnShapeMouseEnter="shapeMouseEnter" OnShapeMouseLeave="shapeMouseLeave" />
            <CenterSettings Latitude="42.7" Longitude="43.33" />
            <LayersCollection>
                <telerik:MapLayer Type="Tile" Subdomains="a,b,c"
                    UrlTemplate="http://#= subdomain #.tile2.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png"
                    Attribution="� <a href='https://osm.org/copyright' title='OpenStreetMap contributors' target='_blank'>OpenStreetMap contributors</a>.">
                </telerik:MapLayer>
                <telerik:MapLayer Type="Bubble" LocationField="Location" ValueField="Value">
                    <StyleSettings>
                        <FillSettings Color="Yellow" />
                        <StrokeSettings Color="Green" Width="1" />
                    </StyleSettings>
                </telerik:MapLayer>
            </LayersCollection>
        </telerik:RadMap>
    </form>
</body>
</html>

Display Shape Tooltips in RadMap

How to

Solution

See Also