发表新帖
发表新帖

JQuery JSTree - add a ToolTip

后端 未结
关注
7 1296
小鲜肉
小鲜肉 2021-01-04 20:14

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

相关标签:
7条回答
  • 情歌与酒
    2021-01-04 20:51

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

                $("#").attr("title",data.node.text);
        });
    0 讨论(0)
  • 没有蜡笔的小新
    2021-01-04 20:52

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

    0 讨论(0)
  • 隐瞒了意图╮
    2021-01-04 20:53

    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)
  • 长发绾君心
    2021-01-04 21:03 
    $("#my_tree).bind("hover_node.jstree", function (e, data) 
{
    alert(data.rslt.obj.attr("id"));
})
    0 讨论(0)
  • 梦谈多话
    2021-01-04 21:03

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

    { ..., 
  a_attr : { title: 'my tooltip'} 
}
    0 讨论(0)
  • 萌比男神i
    2021-01-04 21: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

    0 讨论(0)
 看不清?
提交回复
热议问题