All geek questions in one place

JQuery JSTree - add a hint

Is there any way to add Tooltip to JSTree node? I would like to display additional information when the user hovers over an item.

I am very tight when it comes to jQuery, so there may be an obvious answer to this question.

Edit: Thanks to zzzz below, I can get a simple hoverbar. I still can't apply the fancy JQuery hint to it, even though the div tree is inside the fieldset , because the hints on the hint page will prompt.

+8
source share
7 answers
 $("#my_tree).bind("hover_node.jstree", function (e, data) { alert(data.rslt.obj.attr("id")); })
+7
source

I dynamically create my jstree using the create_node function:

 $("#my_tree").jstree("create_node", "my_node", "inside", { "attr": { "id": "my_node" }, "data": { "attr": { "class": "show_tooltip", "title": "my tooltip text" }, "title": "my node text" } } );

And then I define the .show_tooltip class as a hint: $(".show_tooltip").tooltip();

+7
source

Isn't it just adding the title attribute to your node in the tree that hangs? nothing unusual.

+5
source

Adding a hint to jstree is very simple. Before I write down the steps, let me explain what I will do

Prerequisites: You must use the jquery library and other dependencies. So in your head the tag should look something like this.

 <head> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> <script> $(function() { $( document ).tooltip(); }); </script> <style> label { display: inline-block; width: 5em; } </style> </head>

The above code will get the jquery library and the necessary css. He will also create the necessary style for the tool tip.

So now for the steps you need to take in Jstree. note that I am writing this answer for the latest version of jstree 3.0.2

We need to catch 'hover_node.jstree'

 .on('hover_node.jstree',function(e,data){ $("#"+data.node.id).prop('title', "add your custom title here"); })

That's all you have to do, and jquery will take care of the rest to show a tooltip

The logic behind this is that jquery automatically checks to see if there is a tittle attribute associated with any node (i.e. element), and then displays a hint if there is any header. So, all we do is simply add the name to the node dynamically. This gives you the flexibility to add custom hints for each node depending on your data for each node, as well as hard code if it is fixed.

For more customization and styling, you can refer to the JQuery Tooltip

+3
source

Use "a_attr" or "li_attr" to add a title, depending on which element you want to include in the title, as described here: https://www.jstree.com/docs/json/

If you use the create_node function, follow these steps:

 $("#my_tree").jstree("create_node", "my_node", "inside", { "attr": { "id": "my_node" }, "li_attr": { //or a_attr if you prefer "title": "my tooltip text", "class": "show_tooltip" }, "text": "my node text" });

In the above example, a tooltip will be displayed in the browser. If you want to use a custom tooltip (e.g. Bootstrap), you can simply call $ (". Show_tooltip"). Tooltip ();

+1
source

Create a tooltip with value binding using jstree .bind ("hover_node.jstree", function (e, data) {

  $("#").attr("title",data.node.text); });
+1
source

Use the a_attr property from the node to add a title property

 { ..., a_attr : { title: 'my tooltip'} }
0
source

Source: https://habr.com/ru/post/895261/

More articles:


All Articles