Tooltip on TreeViewNode

6 posts, 0 answers
  1. Krzysztof
    Krzysztof avatar
    3 posts
    Member since:
    Jun 2014

    Posted 10 Sep 2014 Link to this post

    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

  2.
  3. Alexander Popov
    Admin
    Alexander Popov avatar
    1445 posts

    Posted 12 Sep 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Krzysztof
    Krzysztof avatar
    3 posts
    Member since:
    Jun 2014

    Posted 16 Sep 2014 Link to this post

    Thanks for help! It is work for me!
  7. Sreejith
    Sreejith avatar
    8 posts
    Member since:
    Jan 2013

    Posted 18 Sep 2018 in reply to Alexander Popov Link to this post

    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

  8.
  9. Neli
    Admin
    Neli avatar
    428 posts

    Posted 20 Sep 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  11. Sreejith
    Sreejith avatar
    8 posts
    Member since:
    Jan 2013

    Posted 20 Sep 2018 in reply to Neli Link to this post

    Thanks, this is working as expected.
Back to Top