JQuery JSTree: agregue una información sobre herramientas

¿Hay alguna forma de agregar un Tooltip a un nodo JSTree? Me gustaría mostrar información adicional cuando el usuario pasa el mouse sobre un elemento.JQuery JSTree: agregue una información sobre herramientas

Soy muy densa en lo que respecta a JQuery, por lo que puede haber una respuesta obvia a esto.

Edit: Gracias a zzzz a continuación, puedo obtener un cuadro emergente simple para aparecer. Todavía no puedo aplicar una JQuery Tooltip elegante a pesar de poner el árbol div dentro de un fieldset como lo sugieren las instrucciones en la página de información sobre herramientas.

Fuente

2011-08-17 Haphazard

¿No se trata simplemente de agregar un atributo de título a su nodo en el árbol que está suspendido en ?? nada del otro mundo ..

Fuente

2011-08-17 17:21:06 Baz1nga

Gracias por la sugerencia. Con esto, pude obtener una descripción de la herramienta html básica. Si bien esto puede ser lo suficientemente bueno, me gustaría saber cómo activar una sugerencia de herramienta de JQuery en el desplazamiento de un nodo. – Haphazard

La información sobre herramientas estándar se puede lograr estableciendo 'node [a_attr] [title]' en sus datos JSON. – cweiske

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

Fuente

2011-09-08 19:32:36

Para atrapar el mouse que sale del nodo, busque el evento 'dehover_node.jstree'. Dejando esto aquí como referencia. – arvidkahl

¿qué exactamente 'data.rslt.obj.attr (" id ")' me refiero a qué son los datos, rslt, obj aquí? –

Creo mi jstree dinámicamente utilizando la función 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" } });

Y entonces definir la clase .show_tooltip como una sugerencia: $(".show_tooltip").tooltip();

Fuente

2011-11-17 12:35:56 Greg

Adición de una punta de la herramienta a jstree es muy simple . Antes de escribir los pasos déjenme explicar lo que haré

Requisitos previos: debe usar la biblioteca jquery y otras dependencias. Así que en su cabeza etiquetar debería ser algo como esto

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

El código anterior obtendrá la biblioteca jQuery y el css necesario. También creará el estilo requerido para la punta de la herramienta

Así que ahora para los pasos a seguir en el Jstree. en cuenta que la escritura iam esta respuesta para el último verison de jstree 3.0.2

Tendremos que coger el 'hover_node.jstree'

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

Esto es todo lo que tiene que hacer y el jQuery se llevará cuidado del resto para mostrar la información sobre herramientas

La lógica que está detrás de esto es que jquery comprueba automáticamente si hay un pequeño atributo asociado con cualquier nodo (es decir, elemento) y luego muestra la información sobre herramientas si hay algún título asociado. Entonces, todo lo que estamos haciendo es simplemente agregar el título al nodo dinámicamente. Esto le da flexibilidad para agregar información sobre herramientas personalizada en cada nodo, dependiendo de sus datos para cada nodo o también puede codificar si es fijo.

Para mayor personalización y el estilo se puede hacer referencia Jquery Tooltip

Fuente

2014-08-26 08:08:21 Chetan

Gracias por su brillante respuesta. Me salvaste la vida en cierta medida. Estoy tratando de encontrar la forma de mostrar una IMAGEN para una información sobre herramientas, y mi cabeza está a punto de salir. –

en la propiedad del título del nodo, intente usar la etiqueta img con el src de la imagen y vea si funciona. – Chetan

Hola @Chetan, lo intenté, pero todo lo que pude hacer fue mostrarme html como una información sobre herramientas. ¡Aún estoy resolviendo un problema! –

uso del "a_attr" o "li_attr" para añadir un título, dependiendo de qué elemento desea que el título para estar en, como se documenta aquí: https://www.jstree.com/docs/json/

Si se utiliza la función "create_node", y luego hacerlo de esta manera:

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

lo anterior se mostrará una información sobre herramientas en el navegador. Si desea utilizar una información sobre herramientas personalizada (por ejemplo, Bootstrap), simplemente puede llamar a $ (". Show_tooltip").información sobre herramientas();

Fuente

2017-12-06 14:32:04 Andrew

JQuery JSTree: agregue una información sobre herramientas

Respuesta

Cuestiones relacionadas