Tooltip for KendoTreeView jQuery

[sam]

Hi,

I need to display a tooltip for KendoTreeView when hovered over the checkbox.

HTML

<div class="demo-section k-content">
 <div>
  <div id="treeview"></div>
 </div>
</div>

 

JavaScript

ruleNames = [{ text: "Rule 1", description: "Rule 1 Hovered upon" },
            { text: "Rule 2", description: "Rule 2 Hovered upon" }]
$("#treeview").kendoTreeView({
            checkboxes: {
                checkChildren: true
            },
            check: function (e) {
                onCheck(pass);
            },
            dataSource: [{ text: "List of Rules", expanded: false, items: ruleNames }]
        });

I want to display the description text on the tooltip.

Please could your help me out with a demo.

Thanks in advance

[Martin]

Hello Sam,

Thank you for the provided code snippet.

You can do that by passing a function to the content configuration:

content:function(e){
  var checkBox = e.target;
  var text= $(checkBox).parent().find(".k-in")[0].innerText;
  return text;
}

Here is a small Dojo example for reference.

Let me know if you have any questions.

Regards,
Martin
Progress Telerik

[sam]

Hi,

I want the tooltip to be present when i hover over the checkbox label and not the checkbox itself.

Also I want the tooltip text to be the description associated with that checkbox.

For example, if i hover over the checkbox label "Rule 1", I want the tooltip description to be "Rule 1 Hovered upon".

[Martin]

Hello Sam,

If you wish to show the tooltip if the TreeView node is hovered, the filter should be set to .k-in.

$("#treeview").kendoTooltip({
        filter: ".k-in",

In order to return the description field from the model as content, please refer to the below code snippet, which will return the model object where you can access the desired field:

content:function(e){
  var treeview = $("#treeview").data("kendoTreeView");
  var text= $(e.target)[0].innerText;
  var model = $("#treeview").data("kendoTreeView").findByText(text);
  var dataItem = treeview.dataItem(model);
  if(!dataItem.description){
    return dataItem.text;
  }
  else{
    return dataItem.description;
  }
}

As the parent node does not have a description field, I am returning the text instead. Here is the modified example for reference.

Let me know if you have any further questions.

Regards,
Martin
Progress Telerik