Tooltip on TreeViewNode

[Krzysztof]

Hello!
I've tried to put ToolTip into TreeView node. This is my note template:

<script id="treeview-template" type="text/kendo-ui-template">

    <div style="width:500px">

        <span class="#: item.icon #" style="width:18px"></span>

        <span>#: item.name() #</span>

         # if (item.description() != null) { #

            <span class="ico-tooltip fa fa-info-circle" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="#: item.description() #" ></span>

         # } #

         <button type="button" class="btn btn-xs" style="height:16px;margin-left:5px">

             <i class="fa fa-lg fa-plus-square-o"></i>

         </button>             

    </div>

</script>

I also tried to use kendo-knockout library with code:

<i class="ico-tooltip fa fa-info-circle" data-bind="kendoTooltip: { content: item.description() }"></i>

but it didn't work too...


Is it any posibility to put working Tooltip on TreeView node?
Is posibility to connect button on TreeView node to knockout function?

Thanks for any help

[Alexander Popov]

Hi Krzysztof,

I would recommend initializing a Kendo ToolTip widget and setting its filter option to a selector matching the TreeView's items. Here is an example illustrating how this could be achieved.

Regards,
Alexander Popov
Telerik

 

 

[Krzysztof]

Thanks for help! It is work for me!

[Sreejith]

Hi Alexander , 

http://jsbin.com/oQuDeFo/1/edit?html,js,output

if want to have the tooltip only for the Parent Nodes? then how can i filter those nodes?

Thanks,

Sree

[Neli]

Hello Sreejith,

I have replied in the support thread on the same topic. As this could be helpful to other users I will paste my reply here as well. 

In the Tooltip show event handler you could get a reference of the TreeView. You could also check the text of the hovered target. Then use the findByText() method to search for the node with such text. By using the dataItem method, you could check the data of the node and especially if the node has children.

show: function(e) {

  var treeview = $("#treeview").data("kendoTreeView");
  var tooltip = this;
  var text = treeview.text(tooltip.target());
  var node = treeview.findByText(text)
  var dataitem = treeview.dataItem(node)
  var isParent = dataitem.hasChildren

  if(isParent)
  {
    this.content.parent().css("visibility", "visible")
    tooltip.content.text("Tooltip for user: " + text);
  }
},

Here is a Dojo example where the Tooltip is displayed only when hovering the parent nodes. The approach in ASP.NET Core projects will be the same.

 

Regards,
Neli
Progress Telerik

[Sreejith]

Thanks, this is working as expected.