JQuery JSTree - add a ToolTip
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);
});
加载中,请稍侯......
精彩评论