Question

有没有办法将Tooltip添加到JSTree节点？当用户将鼠标悬停在元素上时，我想显示额外的信息。

对于JQuery来说，我非常密集，所以可能有一个明显的答案。

编辑：感谢下面的zzzz，我可以弹出一个简单的悬停框。尽管按照工具提示页面中的说明建议将树div放在fieldset内，我仍然无法使用花哨的JQuery Tooltip。

Answer 1

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

Answer 2

我使用create_node函数动态创建jstree：

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

然后我将.show_tooltip类定义为工具提示： $(".show_tooltip").tooltip();

Answer 3

不仅仅是为了在树上悬停的节点添加title属性？没什么特别的..

Answer 4

向jstree添加工具提示非常简单。在写下这些步骤之前，让我解释一下我将要做什么

先决条件：您应该使用jquery库和其他依赖项。所以在你的head标签中应该看起来像这样

<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>

上面的代码将获取jquery库和所需的css。此外，它还将为工具提示创建所需的样式

现在就Jstree采取的步骤了。请注意，我为jstree 3.0.2的最新版本写了这个答案

我们需要捕捉'hover_node.jstree'

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

这就是你要做的所有事情，jquery将负责其余的工作提示

这背后的逻辑是jquery自动检查是否存在与任何节点（即元素）相关联的tittle属性，然后如果有任何标题关联则显示工具提示。所以我们所做的只是动态地将标题添加到节点。这使您可以灵活地根据每个节点的数据在每个节点上添加自定义工具提示，或者如果它是固定的，您也可以进行硬编码。

有关更多自定义和样式，您可以参考 Jquery Tooltip

Answer 5

使用“a_attr”或“li_attr”添加标题，具体取决于您希望标题所在的元素，如下所示： https://www.jstree.com/docs/json/

如果使用“create_node”函数，那么就这样做：

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

以上将在浏览器中显示工具提示。如果你想使用自定义工具提示（例如Bootstrap），那么你可以简单地调用$（“。show_tooltip”）。tooltip（）;

Answer 6

创建工具提示，将值与jstree绑定 .bind（“ hover_node.jstree”，函数（e，数据）{

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

Answer 7

使用节点中的a_attr属性添加标题属性

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

JQuery JSTree - 添加工具提示

7 个答案: