Dynamic tooltip with treemap is not working

[Sunil]

Hi there,

 I am trying to add dynamic tooltip to treemap by using ajax function. Tooltip contents are synamic based on id of treemap element. So i decided to use ajax function in content of tooltip, Ajax will call to controller and return "Text" string content. When i wrote below to achieve this tooltip is blank without any content. I think i did some syntax error. Sorry i could not able to find relevant example also.

 

Code (View)

$("#treeMap").kendoTooltip({
            filter: ".k-leaf,.k-treemap-title",
            content: function (e) {
                var treemap = $("#treeMap").data("kendoTreeMap");
                var item = treemap.dataItem(e.target.closest(".k-treemap-tile"));
                //return item.ParameterID + ": " + item.ParameterName + ": " + item.tooltip;
                var parameterID = item.ParameterID;
                $.ajax({
                    url: '@Url.Action("GetTooltipData", "Analysis")' + '?ID=' + parameterID,
                    success: function (data) {
                        //return data;
                        return "hi, this is test tooltip";
                    },
                    error: function (msg) {
                        toastr.error("Error: " + msg.statusText);
                    }
                });
            }
        });

 

Thank you in advance for your support

[Viktor Tachev]

Hello Sunil,


Please try to use an approach similar to the one described in the following thread.

• http://www.telerik.com/forums/tooltip-show-after-ajax-request#9DOE8GLTBUKnRK18BT1d-w

Regards,
Viktor Tachev
Telerik

 

 

[Sunil]

Hi Viktor,

 Thank you for example. It works but tooltip show on center top of whole treemap (for all tiles) always.

 $("#treeMap").on("mouseenter", ".k-leaf", function (e) {
            var item = $("#treeMap").data("kendoTreeMap").dataItem($(this).closest(".k-treemap-tile"));
            var parameterID = item.ParameterID;
            $.ajax({
                    url: '@Url.Action("GetTooltipData", "Analysis")' + '?ID=' + parameterID,
                    success: function (data) {
                        $("#treeMap").kendoTooltip({
                            content: data,
                            position: "top",
                            animation: {
                                close: { effects: "fade:out"  },
                                open: { effects: "fade:in",duration: ​500 }
                            }
                        }).data("kendoTooltip").show($("#treeMap"));
                    }
                });
        });

I think i should use tile (item) instead of $("#treeMap") but when i used that it gave following error.

Error : Microsoft JScript runtime error: Object doesn't support property or method 'kendoTooltip'

 BTW, is there any way to bind tooltip data with treemap at the time of load?

 Thank you

 

 

 

[Viktor Tachev]

Hi Sunil,

Try to set the filter option for the tooltip. This way the tooltip should be displayed when the user hovers over the tiles.

filter: ".k-treemap-tile"

Regards,
Viktor Tachev
Telerik