JQuery JSTree - add a ToolTip_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-28 23:42 出处：网络

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.

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 th开发者_如何学Ce Tooltip page would suggest.

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

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

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

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

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

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

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

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

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

JQuery JSTree - add a ToolTip

精彩评论

关注公众号

热门标签

图文推荐

JQuery JSTree - add a ToolTip

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：