如何将工具提示添加到特定的 jsTree 节点答案

【问题标题】：How do I add a tooltip to a specific jsTree node如何将工具提示添加到特定的 jsTree 节点
【发布时间】：2019-12-06 00:54:18
【问题描述】：

我的节点似乎覆盖了另一个区域，但我似乎无法正确包含它。如果您知道如何做到这一点，那么我也会接受该解决方案。看到许多节点字符串可能很长，向节点添加工具提示可能是个好主意...

my script...
<script type="text/javascript">
$(document).ready(function(){
$('#jstree').jstree({

    plugins: ["themes","html_data", "state"],
    'core' : {
         'themes' : {
        'theme' : "apple",
        'dots' : true,
        'icons' : false
    },
        'data' : jsonTreeData
    }
    }).bind("select_node.jstree", function (e, data) {
     var href = data.node.a_attr.href;
     var parentId = data.node.a_attr.parent_id;
     if(href == '#')
     return '';

     window.open(href);

});
$('#jstree').slimScroll({
    height: '400px'
});

<div class="col-xl-3" style="background-color:#eeeeee; 
border-right:thin solid rgba(0,0,0,0.2);">


<div class="row" 
style="width: auto;margin: 0px;padding-left:5px;
padding-right: 5px;padding-top: 10px;">

<div id="jstree" class="treeview"></div>

</div>
</div>

【问题讨论】：

你也可以添加你的html代码吗？
@Murali -- 我使用了省略号，所以我现在不太关心宽度或过度文本......另外我正在使用滚动条，所以最好只使用工具提示。 HTML 非常混乱，因为它确实包含所有内联元素......但我会发布它

标签： jquery jstree

【解决方案1】：

要向节点添加工具提示，您可以在准备数据时使用 a_attr 属性，方法是添加 title。您也可以在相同的属性中使用超链接。

您可以使用如下的json数据：

var jsondata = [
    { "id": "ajson1", "parent": "#", "text": "Simple root node", "a_attr": {href:'http://example1.com', title:'Simple root node tooltips'} },
    { "id": "ajson2", "parent": "#", "text": "Root node 2", "a_attr": {href:'http://example2.com', title:'Root node 2 tooltips'} },
    { "id": "ajson3", "parent": "ajson2", "text": "Child 1",  "a_attr": {href:'http://example3.com', title:'Child 1 tooltips'} },
    { "id": "ajson4", "parent": "ajson2", "text": "Child 2",  "a_attr": {href:'http://example4.com', title:'Child 2 tooltips'} }
];

它会做剩下的事情。您可以在jsTree-tooltips-example-with-linked-node 中查看下面简单而完整的工作示例。

【讨论】：