JQuery JSTree - 添加工具提示

有没有办法将Tooltip添加到JSTree节点？我想在用户悬停在某个元素上时显示额外的信息。JQuery JSTree - 添加工具提示

对于JQuery，我非常密集，因此可能会有明显的答案。

编辑：感谢zzzz下面，我能够得到一个简单的悬停框弹出。尽管将树的div置于fieldset之内，但仍然无法将精美的JQuery工具提示应用于该工具提示，因为工具提示页面中的说明会提示。

来源

2011-08-17 Haphazard

是不是只是添加一个标题属性到您的节点在树上的悬停？没有什么花哨..

来源

2011-08-17 17:21:06 Baz1nga

感谢您的提示。有了这个，我可以得到一个基本的HTML工具提示显示。虽然这可能足够好，但我仍想知道如何在节点悬停时触发花哨的JQuery工具提示。 – Haphazard

标准工具提示可以通过在JSON数据中设置'node [a_attr] [title]'来实现。 – cweiske

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

来源

2011-09-08 19:32:36

要捕捉鼠标离开节点，请查找'dehover_node.jstree'事件。只是在这里作为参考。 – arvidkahl

'data.rslt.obj.attr（“id”）究竟是什么''我的意思是什么是数据，rslt，obj在这里？ –

创建动态使用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();

来源

2011-11-17 12:35:56 Greg

添加工具提示中jstree非常简单。在写下步骤之前，让我解释我会做什么

先决条件：您应该使用jQuery库和其他依赖项。因此，在你的头标记它应该是这个样子

<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上进行。注意，IAM写这个答案jstree的最新verison 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

来源

2014-08-26 08:08:21 Chetan

谢谢你的杰出答案。你在一定程度上拯救了我的生命。我试图弄清楚如何让它显示一个工具提示图像，我的头即将脱落。 –

在节点的title属性中，尝试将img标签与图像的src一起使用，看看它是否有效。 – Chetan

嗨@Chetan，我确实尝试过，但我所能做的就是为我显示html作为工具提示。我仍然在搞清楚工作！ –

使用“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”）。工具提示（）;

来源

2017-12-06 14:32:04 Andrew

JQuery JSTree - 添加工具提示

回答

相关问题