JQuery JSTree - добавить всплывающую подсказку - PullRequest
Новая
       35

JQuery JSTree - добавить всплывающую подсказку

8 голосов
/ 17 августа 2011

Есть ли способ добавить подсказку к JSTree узлу?Я хотел бы отображать дополнительную информацию, когда пользователь наводит курсор на элемент.

Я довольно плотный, когда дело доходит до JQuery, поэтому на этот вопрос может быть очевидный ответ.

Редактировать: Спасибок zzzz ниже, я могу получить простую всплывающую подсказку.Я до сих пор не могу применить к нему причудливую подсказку JQuery, несмотря на то, что div дерева помещено в fieldset, как подсказывают инструкции на странице подсказки.

Ответы [ 6 ]

7 голосов
/ 17 ноября 2011

Я создаю jstree динамически, используя функцию create_node: 

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

7 голосов
/ 08 сентября 2011 
$("#my_tree).bind("hover_node.jstree", function (e, data) 
{
    alert(data.rslt.obj.attr("id"));
})
5 голосов
/ 17 августа 2011

разве это не просто добавление атрибута заголовка к вашему узлу в дереве, которое находится на ?? ничего особенного ..

3 голосов
/ 26 августа 2014

Добавить подсказку к 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 Tooltip

1 голос
/ 03 октября 2018

Создать подсказку для привязки значений с помощью jstree .bind ("hover_node.jstree", функция (e, data) {

            $("#").attr("title",data.node.text);
        });
1 голос
/ 06 декабря 2017

Используйте «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 ();

...