JQuery JSTree - bir ToolTip ekleyin

JSTree düğümüne Tooltip eklemek için bir yol var mı? Kullanıcı bir elemanın üzerine geldiğinde fazladan bilgi göstermek istiyorum.JQuery JSTree - bir ToolTip ekleyin

JQuery söz konusu olduğunda oldukça yoğunum, bu yüzden buna açık bir cevap olabilir.

Düzenleme: Aşağıdaki zzzz sayesinde, açılır bir basit gezgini kutusu alıyorum. Tooltip sayfasındaki talimatların önerebileceği gibi fieldset ağacının div ağacına koymasına rağmen hala bir JQuery Tooltip uygulayamıyorum.

kaynak

2011-08-17 Haphazard

Sadece, üzerinde durdurulan ağaçtaki düğüme bir başlık niteliği eklemekle ilgili değil mi? fantezi bir şey .. Ben dinamik create_node işlevini kullanarak benim jstree oluşturmak

kaynak

2011-08-17 17:21:06 Baz1nga

Bahşiş için teşekkürler. Bununla, görüntüleyen bir temel html araç ipucunu elde edebildim. Bu yeterince iyi olsa da, bir düğümün üzerine gelip bir fantezi JQuery araç ipucunu nasıl tetikleyeceğini bilmek isterim. – Haphazard

Standart araç ipuçlarını, JSON verilerinizde "node [a_attr] [title]' ayarlayarak yapabilirsiniz. – cweiske

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

kaynak

2011-09-08 19:32:36

Düğümden ayrılan fareyi yakalamak için 'dehover_node.jstree' olayını arayın. Bunu burada referans olarak bırakıyorum. – arvidkahl

tam olarak ne data.rslt.obj.attr ("id") 'ne demek data, rslt, obj nedir? –

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

Sonra ipucu olarak .show_tooltip sınıfını tanımlar: $(".show_tooltip").tooltip();

kaynak

2011-11-17 12:35:56 Greg

jstree bir araç ipucu ekleme çok basit. Adımları yazmadan önce ne yapacağımı açıklamama izin verin

Önkoşullar: jquery kütüphanesi ve diğer bağımlılıkları kullanmalısınız. Bu

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

gibi görünmelidir etiketlemek kafanın içinde Yani yukarıdaki kod jQuery kütüphanesi ve gerekli css alacak. Ayrıca şimdi Jstree üzerinde atılacak adımlar için araç ucu

için gerekli stili yaratacaktır. o iam Yazma jstree son sürümde için bu yanıta dikkat 3.0.2

Biz 'hover_node.jstree'

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

Bu yakalamak gerekir yapmanız gereken şey bütün olup jquery alacak geri kalanını gösterecek şekilde gösterme

Bunun ardındaki mantık, jquery'nin herhangi bir düğümle (ör: öğe) ilişkili bir küçük öznitelik olup olmadığını otomatik olarak kontrol etmesi ve daha sonra ilişkili herhangi bir başlık varsa araç ipucunu görüntülemesidir. Yani yaptığımız her şey, yalnızca düğüme dinamik olarak başlık eklemek. Bu, her bir düğüm için verilerinize bağlı olarak her bir düğüme özel araç ipucu ekleme esnekliği sağlar veya sabit olan bir kod da olabilir.

daha özelleştirme için

ve aşağıda belgelendiği gibi, sen başlık üzerinde olmasını istediğiniz eleman bağlı bir başlık eklemek için Jquery Tooltip

kaynak

2014-08-26 08:08:21 Chetan

Mükemmel cevabınız için teşekkür ederiz. Hayatımı bir dereceye kadar kurtardın. Bir araç ipucu için bir IMAGE göstermesi için onu nasıl anlamaya çalıştığımı anlamaya çalışıyorum ve kafam bunun için yola çıkmak üzeredir. –

düğümün başlık özelliğinde, img etiketini görüntünün src'si ile kullanmayı deneyin ve çalışıp çalışmadığını görün. – Chetan

Merhaba @Chetan, Bunu denedim ama yapabileceğim tek şey benim için bir ipucu olarak html göstermekti. Hala bir iş bulmaya çalışıyorum! –

kullanın "a_attr" veya "li_attr" başvurabilir stil: https://www.jstree.com/docs/json/

"create_node" işlevini kullanarak Eğer

, o zaman böyle yapmak:

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

yukarıdaki tarayıcıda bir araç ipucu gösterecektir. Özel bir araç ipucu (ör. Bootstrap) kullanmak istiyorsanız, o zaman $ (". Show_tooltip") diyebilirsiniz.ipucu();

kaynak

2017-12-06 14:32:04 Andrew

JQuery JSTree - bir ToolTip ekleyin

cevap

İlgili konular