JQuery JSTree - add a ToolTip

2019-04-07 02:12发布

站内问答 / jQuery
1471 6 4

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.

6条回答
虎瘦雄心在
2楼-- · 2019-04-07 02:27

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

查看更多
0人赞 添加讨论(0) 举报
Root（大扎）
3楼-- · 2019-04-07 02:30

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

查看更多
0人赞 添加讨论(0) 举报
淡お忘
4楼-- · 2019-04-07 02:31

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();

查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
5楼-- · 2019-04-07 02:44

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();

查看更多
0人赞 添加讨论(0) 举报
家丑人穷心不美
6楼-- · 2019-04-07 02:50 
$("#my_tree).bind("hover_node.jstree", function (e, data) 
{
    alert(data.rslt.obj.attr("id"));
})
查看更多
0人赞 添加讨论(0) 举报
Evening l夕情丶
7楼-- · 2019-04-07 02:54

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

            $("#").attr("title",data.node.text);
        });
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)