はJSTreeノードにTooltipを追加する方法は、ツールヒントをあります追加しますか？私は、ユーザーが要素の上を移動するときに余分な情報を表示したいと思います。jQueryのJSTree -
JQueryの場合、私はかなり密集しているので、これに明らかな答えがあるかもしれません。
編集： おかげで以下ZZZZする、私がポップアップする簡単なホバーボックスを取得することができています。ツールヒントページの指示に示唆されているように、ツリーのdivをfieldsetに入れても、まだまだ素晴らしいJQueryツールチップを適用することはできません。
あなたのノードにあなたのノードにホバーされているタイトル属性を追加するだけではありませんか？空想は何もありません..私は動的にcreate_node機能使用して、私のjstree作成
$("#my_tree).bind("hover_node.jstree", function (e, data)
{
alert(data.rslt.obj.attr("id"));
})
ノードを離れるマウスを捕まえるには、 'dehover_node.jstree'イベントを探します。ここを参考にしておきます。 – arvidkahl
正確に何か 'data.rslt.obj.attr（" id "）'データ、rslt、objとは何ですか？ –
：
$("#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();
がjstreeするツールチップを追加します非常に簡単です。階段を下り書く前に私が
前提条件をやっているだろうかを説明しましょう：あなたはjQueryライブラリや他の依存関係を使用する必要があります。だからあなたの頭の中でそれは上記のコードはjQueryライブラリと必要なCSSを取得します。この
<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>
ようになるはずですタグ付け。また、それはJstreeに摂取される手順については、だから今、ツールチップ
に必要なスタイルを作成します。そのIAM書き込みに私たちは、これはあなたが何をすべきか、すべてであるとjQueryがかかります「hover_node.jstree」
.on('hover_node.jstree',function(e,data){
$("#"+data.node.id).prop('title', "add your custom title here");
})
をキャッチする必要がありますjstree 3.0.2
の最新verisonため、この答えを注意してください残りの部分を気にしてツールチップを表示する
jqueryは、ノード（つまり要素）に関連付けられたタイトル属性があるかどうかを自動的にチェックし、関連するタイトルがあればツールチップを表示します。 私たちがやっていることは、タイトルをノードに動的に追加することだけです。これにより、各ノードのデータに応じて各ノードにカスタムツールチップを追加する柔軟性が得られます。また、固定されている場合はハードコードすることもできます。よりカスタマイズするための
、あなたがここに記載されているように、あなたはタイトルを上にしたい要素に応じて、タイトルを追加する「a_attr」または「li_attr」を使用 Jquery Tooltip
あなたの華麗な答えに感謝します。あなたは私の人生をある程度まで救った。私はツールチップのイメージを表示する方法を理解しようとしています。私の頭はそれのために外れようとしています。 –
ノードのtitleプロパティに、イメージのsrcでimgタグを使用し、それが動作するかどうかを確認してください。 – Chetan
こんにちは@Chean、私はそれを試みましたが、私はそれが私にはツールチップとして私のために表示された得ることができるすべてを得ることができた。私はまだ周りの仕事を考えている！ –
を参照することができスタイリング： 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"）を呼び出すことができます。ツールチップ（）;
チップをありがとう。これで、基本的なhtmlツールチップを表示することができました。これで十分かもしれませんが、私はノードのホバー上でファンシーなJQueryのツールチップを起動する方法を知りたいと思っています。 – Haphazard
あなたのJSONデータに 'node [a_attr] [title]'を設定することで、標準ツールチップを実現できます。 – cweiske