JQuery JSTree – 添加工具提示

有没有办法将工具提示添加到JSTree节点? 当用户将鼠标hover在元素上时,我想显示额外的信息。

在谈到JQuery时,我非常密集,所以可能有一个明显的答案。

编辑:感谢下面的zzzz,我可以弹出一个简单的hover框。 我仍然无法将奇特的JQuery Tooltip应用于它,尽管将树的div放在一个fieldset因为Tooltip页面中的指令会建议。

我使用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();

是不是只是在树上的节点中添加一个title属性? 没有什么花哨..

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

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

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

        

上面的代码将获取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

使用“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();

使用jstree .bind创建工具提示绑定值(“hover_node.jstree”,函数(e,data){

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