blocks|key|2653106|text|$("#my_tree).bind("hover_node.jstree",+function+(e,+data)+
{
++++alert(data.rslt.obj.attr("id"));
})|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2653107|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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


blocks|key|4766592|text|我使用create_node函数动态创建我的jstree：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4766593|$("#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"+}+}+);|code-block|syntax|javascript|4766594|然后我将.show_tooltip类定义为tooltip：$(".show_tooltip").tooltip();|4766595|entityMap^0|3|B|0|0|4|D|T|T|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>I create my jstree dynamically using the <code>create_node</code> function:</p>

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

<p>And then I define the <code>.show_tooltip</code> class as tooltip:
<code>$(".show_tooltip").tooltip();</code></p>


blocks|key|4766571|text|这不就是向悬停的树中的节点添加title属性吗？没什么花哨的..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4766572|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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


blocks|key|2653177|text|向jstree添加工具提示非常简单。在写下这些步骤之前，让我先解释一下我要做什么|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2653178|先决条件:您应该使用jquery库和其他依赖项。所以在你的head标签中它应该看起来像这样|2653179|<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>|code-block|syntax|javascript|2653180|上面的代码将获得jquery库和所需的css。此外，它还将创建工具提示所需的样式|2653181|因此，现在是对Jstree采取的步骤。请注意，我正在为jstree+3.0.2的最新版本编写此答案|2653182|我们需要捕获“hover_node.jstree”|2653183|.on('hover_node.jstree',function(e,data){
$("#"%2Bdata.node.id).prop('title',+"add+your+custom+title+here");
})|2653184|这就是您要做的全部工作，jquery将负责其余的工作，以显示工具提示|2653185|这背后的逻辑是，jquery自动检查是否有与任何节点(即元素)相关联的title属性，如果有任何相关联的标题，则显示工具提示。因此，我们所做的只是动态地将标题添加到节点。这使您可以灵活地根据每个节点的数据在每个节点上添加自定义工具提示，或者如果它是固定的，您也可以进行硬编码。|2653186|有关更多的自定义和样式，可以参考Jquery+Tooltip|offset|length|2653187|entityMap|0|LINK|mutability|MUTABLE|url|http://jqueryui.com/tooltip/^0|0|0|0|0|0|0|0|0|0|G|E|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|19|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1A|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1C|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1E|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1F|8|@]|9|@$W|1G|X|1H|1|1I]]|A|$]]|$1|Y|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]]]

<p>Adding a tool tip to jstree is very simple . Before writing down the steps let me explain what I will be doing</p>

<p>Prerequisites: you should use jquery library and other dependencies. So in your head tag it should look something like this</p>

<pre><code>&lt;head&gt;
&lt;link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"&gt;
&lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
&lt;script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(function() {
$( document ).tooltip();
});
&lt;/script&gt;
&lt;style&gt;
label {
display: inline-block;
width: 5em;
}
&lt;/style&gt;
&lt;/head&gt;
</code></pre>

<p>The above code will get the jquery library and the required css. Also it will create required style for the tool tip</p>

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

<p>We will need to catch the 'hover_node.jstree' </p>

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

<p>This is all what you have to do and the jquery will take care of the rest to show the tooltip</p>

<p>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.</p>

<p>For more customizing and styling you can refer
<a href="http://jqueryui.com/tooltip/" rel="nofollow">Jquery Tooltip</a></p>


blocks|key|4766689|text|使用"a_attr“或"li_attr”添加标题，具体取决于您希望标题所在的元素，如下所示：https://www.jstree.com/docs/json/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4766690|如果使用"create_node“函数，则如下所示：|4766691|$("#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"
++++});|code-block|syntax|javascript|4766692|上面的代码将在浏览器中显示工具提示。如果你想使用一个自定义的工具提示(例如Bootstrap)，那么你可以简单的调用$(".show_tooltip").tooltip()；|4766693|entityMap|0|LINK|mutability|MUTABLE|url|https://www.jstree.com/docs/json/^0|1A|X|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>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:
<a href="https://www.jstree.com/docs/json/" rel="nofollow noreferrer">https://www.jstree.com/docs/json/</a></p>

<p>If using the "create_node" function, then do it like this:</p>

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

<p>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();</p>


blocks|key|1948221|text|使用节点中的a_attr属性添加title属性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1948222|{+...,+
++a_attr+:+{+title:+'my+tooltip'}+
}|code-block|syntax|javascript|1948223|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Use the a_attr property from the node to add a title property </p>

<pre><code>{ ..., 
  a_attr : { title: 'my tooltip'} 
}
</code></pre>


blocks|key|36787|text|创建工具提示将值与jstree数据绑定(“hover_node.jstree”，.bind(e，data){|type|unstyled|depth|inlineStyleRanges|entityRanges|data|36788|++++++++++++$("#").attr("title",data.node.text);
++++++++});|code-block|syntax|javascript|36789|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>            $("#").attr("title",data.node.text);
        });
</code></pre>


<p>Is there a way to add a <a href="http://docs.jquery.com/Plugins/Tooltip">Tooltip</a> to a <a href="http://www.jstree.com/">JSTree</a> node?  I would like to display extra information when the user hovers over an element.</p>

<p>I'm pretty dense when it comes to JQuery so there may be an obvious answer to this.</p>

<p>Edit:
Thanks to zzzz below, I am able to get a simple hover box to pop up.  I still cannot apply a fancy JQuery Tooltip to it despite putting the tree's <code>div</code> within a <code>fieldset</code> as the instructions within the Tooltip page would suggest.  </p>


JQuery JSTree - add a ToolTip

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

有没有办法向节点添加？当用户将鼠标悬停在元素上时，我希望显示额外的信息。当涉及到JQuery时，我非常熟悉，所以对此可能有一个显而易见的答案。编辑:多亏了下面的zzzz，我可以弹出一个简单的悬停框。尽管按照工具提示页面中的说明将树的div放在fieldset中，但我仍然无法对其应用花哨的JQuery工具提示。

问JQuery JSTree -添加ToolTip
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery JSTree -添加ToolTipEN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery JSTree -添加ToolTip
EN