JQuery JSTree - 添加工具提示答案

【问题标题】：JQuery JSTree - add a ToolTipJQuery JSTree - 添加工具提示
【发布时间】：2011-08-17 17:14:01
【问题描述】：

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

我对 JQuery 非常熟悉，所以可能有一个明显的答案。

编辑：感谢下面的 zzzz，我能够弹出一个简单的悬停框。尽管按照工具提示页面中的说明将树的div 放在fieldset 中，但我仍然无法对其应用花哨的 JQuery 工具提示。

【问题讨论】：

【解决方案1】：

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

【讨论】：

要捕捉鼠标离开节点，请查找dehover_node.jstree 事件。仅将其留在这里作为参考。
data.rslt.obj.attr("id") 到底是什么意思？这里的数据、rslt、obj 是什么？
为什么是 $("#my_tree").bind 而不是 .on？
.on 在本文发布时不存在。

【解决方案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();

【讨论】：

【解决方案3】：

这不只是为悬停在树中的节点添加标题属性吗？没什么花哨的..

【讨论】：

感谢您的提示。有了这个，我能够得到一个基本的 html 工具提示显示。虽然这可能已经足够好了，但我仍然想知道如何在节点悬停时触发花哨的 JQuery 工具提示。
标准工具提示可以通过在 JSON 数据中设置 node[a_attr][title] 来实现。

【解决方案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自动检查是否有与任何节点（即元素）关联的标题属性，然后如果有任何关联的标题则显示工具提示。所以我们所做的只是将标题动态添加到节点。这使您可以根据每个节点的数据灵活地在每个节点上添加自定义工具提示，或者如果它是固定的，您也可以硬编码。

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

【讨论】：

感谢您的精彩回答。你在某种程度上救了我的命。我正试图弄清楚如何让它显示一个工具提示的图像，我的头快要掉下来了。
在节点的title属性中，尝试使用img标签和图片的src，看看是否有效。
嗨@Chetan，我确实尝试过，但我所能做的就是为我显示html作为工具提示。我还在想办法解决！
我们正在充实解决方案stackoverflow.com/questions/31418074/…

【解决方案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();

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

创建工具提示将值与 jstree 绑定 .bind("hover_node.jstree", function(e, data){

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

【讨论】：