TreeView - Show tooltip when hover on header of a TreeNode

TreeView - Show tooltip when hover on header of a TreeNode

Posted by: thanhnghia.dev on 19 April 2021, 6:11 am EST

• 

  thanhnghia.dev

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 19 April 2021, 6:11 am EST

  Hi,

  I’m working with WjTreeView. But i can’t find no way to show tooltip when user hover on a TreeNode, or it’s header.
  
  Is there any way to show tooltip in WjTreeView?
  
  Thanks a lot.

  Nghia.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 20 April 2021, 7:33 am EST

  Hi,

  To implement the required functionality, we need to first create a new instance of tooltip by using the following format:

  let tooltip = new Tooltip();
  

  After initalizing the tooltip, we need to iterate through all the nodes of TreeView using nodes property of TreeView, traverse using next and previous property of TreeNode class and then we can set the tooltip on the hostElement of the node using setToolTip method.
  
  Please refer to the code snippet below:

  for (let node = tree.nodes[0]; node; node = node.next(false)) {
     let tooltipContent = wjCore.format(
       "<b>Header Node:</b> {hasChildren}, <br> <b>Level:</b> {level},<br><b>Value:</b> {dataItem.header}",
       node
     );
  
     //setting tooltip content for each node
     tt.setTooltip(node.element, tooltipContent);
   }
  

  Please refer to the sample on the link provided below:
  
  https://stackblitz.com/edit/tree-tooltip?file=index.js

  Thank you

• 

  thanhnghia.dev

  • Post Options:
  • Link
    Copy

  Posted 21 April 2021, 10:20 pm EST

  Hi sharad,

  Thanks for your great answer.
  
  But actualy, I just wanna show default tooltips without customize them. So I found another way to make it works.
  
  For each Node of TreeView’s Nodes, I use setAttribute() function to add a title for each NodeElement.
  
  Please refer to the code snippet below:

  // iterating through nodes in Tree View
    for (let node = tree.nodes[0]; node; node = node.next(false)) {
      // use default tooltip
      node.element.setAttribute("title", node.element.innerText);
    }
  

  Thank you again and have a nice day!

  Nghia

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 22 April 2021, 4:24 am EST

  Using title attribute works too. Thank you for sharing your approach.