This is a migrated thread and some comments may be shown as answers.

Dynamic tooltip with treemap is not working

3 Answers 59 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Sunil
Top achievements
Rank 1
Sunil asked on 27 Oct 2015, 06:36 AM

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

3 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 28 Oct 2015, 12:15 PM
Hello Sunil,


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




Regards,
Viktor Tachev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Sunil
Top achievements
Rank 1
answered on 29 Oct 2015, 01:34 AM

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

 

 

 

0
Viktor Tachev
Telerik team
answered on 30 Oct 2015, 11:53 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
ToolTip
Asked by
Sunil
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Sunil
Top achievements
Rank 1
Share this question
or