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

Tooltip for KendoTreeView jQuery

3 Answers 133 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
sam
Top achievements
Rank 1
Veteran
sam asked on 06 May 2020, 07:36 PM

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

3 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 08 May 2020, 03:15 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
sam
Top achievements
Rank 1
Veteran
answered on 08 May 2020, 04:54 PM

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".

0
Martin
Telerik team
answered on 12 May 2020, 12:20 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
TreeView
Asked by
sam
Top achievements
Rank 1
Veteran
Answers by
Martin
Telerik team
sam
Top achievements
Rank 1
Veteran
Share this question
or