JQuery JSTree - add a ToolTip

Question

Is there a way to add a Tooltip to a JSTree node? I would like to display extra information when the user hovers over an element.

I'm pretty dense when it comes to JQuery so there may be an obvious answer to this.

Edit: Thanks to zzzz below, I am able to get a simple hover box to pop up. I still cannot apply a fancy JQuery Tooltip to it despite putting the tree's div within a fieldset as the instructions within the Tooltip page would suggest.

score 8 · Answer 1 · answered Sep 08 '11 at 19:32

8

$("#my_tree).bind("hover_node.jstree", function (e, data) 
{
    alert(data.rslt.obj.attr("id"));
})

answered Sep 08 '11 at 19:32

Nir O.

1,563
1
17
26

2

To catch the mouse leaving the node, look for the `dehover_node.jstree` event. Just leaving this here as a reference. – arvidkahl Dec 03 '13 at 13:12
what exactly does `data.rslt.obj.attr("id")` I mean what is data, rslt, obj here ? – Yash Saraiya Jun 21 '16 at 08:43
Why $("#my_tree").bind instead of .on? – wheeleruniverse Dec 04 '19 at 17:19
1

.on didn't exist at the time of this post. – Nir O. Dec 06 '19 at 22:20

score 7 · Answer 2 · edited Nov 17 '11 at 12:56

I create my jstree dynamically 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 tooltip: $(".show_tooltip").tooltip();

score 5 · Answer 3 · answered Aug 17 '11 at 17:21

5

isnt it just about adding a title attribute to your node in the tree that is hovered on?? nothing fancy..

answered Aug 17 '11 at 17:21

Baz1nga

15,485
3
35
61

Thanks for the tip. With this, I was able to get a basic html tooltip displaying. While this may be good enough, I would like still like to know how to trigger a fancy JQuery tooltip on hover of a node. – Haphazard Aug 17 '11 at 17:48
2

Standard tooltips can be achieved by setting `node[a_attr][title]` in your JSON data. – cweiske Apr 20 '17 at 13:45

score 4 · Answer 4 · answered Aug 26 '14 at 08:08

Adding a tool tip to jstree is very simple . Before writing down the steps let me explain what I will be doing

Prerequisites: you should use jquery library and other dependencies. So in your head tag it 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 required css. Also it will create required style for the tool tip

So now for the steps to be taken on the Jstree. note that iam writing this answer for the latest verison of jstree 3.0.2

We will need to catch the 'hover_node.jstree'

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

This is all what you have to do and the jquery will take care of the rest to show the tooltip

Logic which is behind this is that jquery automatically checks if there is tittle attribute associated with any node(i.e element) and then displays the tooltip if there's any title associated. So all what we are doing is just adding the title to node dynamically . This gives you flexibility to add custom tooltip on each node depending on your data for each node or you can also hardcode if it is a fixed one.

For more customizing and styling you can refer Jquery Tooltip

Thank you for your brilliant answer. You saved my life to some extent. I'm trying to figure out how to get it to show an IMAGE for a tooltip, and my head is about to come off for it. — taki Martillo, Jul 14 '15 at 21:05
in title property of the node, try to use img tag with the src of the image and see if it works. — Chetan, Jul 15 '15 at 02:40
Hi @Chetan, I did attempt that but all I could get it to do was display for me html as a the tool tip. I'm still figuring out a work around! — taki Martillo, Jul 15 '15 at 16:13
We're fleshing out a solution http://stackoverflow.com/questions/31418074/adding-jquery-custom-image-tool-tip-to-jstree — taki Martillo, Jul 15 '15 at 16:24

score 4 · Answer 5 · answered Dec 06 '17 at 14:32

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

If using the "create_node" function, then do it like this:

$("#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"
    });

The above will show a tooltip in the browser. If you want to use a custom tooltip (e.g. Bootstrap), then you can simply call $(".show_tooltip").tooltip();

score 3 · Answer 6 · answered Oct 09 '19 at 14:46

3

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

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

answered Oct 09 '19 at 14:46

Javier Villanueva

31
1

score 1 · Answer 7 · answered Oct 03 '18 at 10:09

1

Do create tooltip bind the values with jstree .bind("hover_node.jstree", function(e, data){

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

answered Oct 03 '18 at 10:09

mugil arasu

11
1

JQuery JSTree - add a ToolTip

7 Answers7

Linked