当前位置：文江博客话题详情

JQuery JSTree - 添加工具提示

发布于 2024-11-29 20:21:45 字数 311 浏览 2 评论 0原文

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

我对 JQuery 非常了解，所以对此可能有一个明显的答案。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

财迷小姐 2024-12-06 20:21:45

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

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

回复收藏 0 原文

舂唻埖巳落 2024-12-06 20:21:45

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

I create my jstree dynamically using the create_node function:

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

And then I define the .show_tooltip class as tooltip:
$(".show_tooltip").tooltip();

回复收藏 0 原文

欲拥i 2024-12-06 20:21:45

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

回复收藏 0 原文

独孤求败 2024-12-06 20:21:45

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

如需更多定制和样式，您可以参考
Jquery 工具提示

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

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

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

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

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

We will need to catch the 'hover_node.jstree'

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

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

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.

For more customizing and styling you can refer
Jquery Tooltip

回复收藏 0 原文

奢望 2024-12-06 20:21:45

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

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:
https://www.jstree.com/docs/json/

If using the "create_node" function, then do it like this:

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

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

回复收藏 0 原文

深白境迁sunset 2024-12-06 20:21:45

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

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

Use the a_attr property from the node to add a title property

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

回复收藏 0 原文

执手闯天涯 2024-12-06 20:21:45

创建工具提示并使用 jstree 绑定值
.bind("hover_node.jstree", 函数(e, 数据){

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

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

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

回复收藏 0 原文

~没有更多了~

关于作者

自由如风

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

JQuery JSTree - 添加工具提示

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

JQuery JSTree - 添加工具提示

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。