JQuery JSTree - thêm một ToolTip

Có cách nào để thêm một Tooltip vào nút JSTree không? Tôi muốn hiển thị thông tin bổ sung khi người dùng di chuột qua phần tử.JQuery JSTree - thêm một ToolTip

Tôi khá dày đặc khi nói đến JQuery để có thể có câu trả lời rõ ràng cho điều này.

Chỉnh sửa: Nhờ zzzz bên dưới, tôi có thể nhận được hộp di chuột đơn giản bật lên. Tôi vẫn không thể áp dụng một chú thích jQuery Tooltip lạ mắt cho nó mặc dù đặt của cây div trong một fieldset như các hướng dẫn trong trang Tooltip sẽ đề nghị.

Nguồn

2011-08-17 Haphazard

không chỉ là việc thêm thuộc tính tiêu đề vào nút của bạn trong cây được di chuột lên ?? không có gì lạ mắt ..

Nguồn

2011-08-17 17:21:06 Baz1nga

Cảm ơn mẹo. Với điều này, tôi đã có thể nhận được một tooltip html cơ bản hiển thị. Trong khi điều này có thể đủ tốt, tôi vẫn muốn biết làm thế nào để kích hoạt một tooltip JQuery ưa thích trên di chuột của một nút. – Haphazard

Các chú giải công cụ tiêu chuẩn có thể đạt được bằng cách đặt 'nút [a_attr] [title]' trong dữ liệu JSON của bạn. – cweiske

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

Nguồn

2011-09-08 19:32:36

Để bắt chuột rời khỏi nút, hãy tìm sự kiện 'dehover_node.jstree'. Chỉ cần để điều này ở đây để tham khảo. – arvidkahl

chính xác những gì 'dữ liệu.rslt.obj.attr (" id ")' Tôi có nghĩa là dữ liệu, rslt, obj ở đây là gì? –

tôi tạo jstree tôi tự động bằng cách sử dụng chức năng 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" } });

Và sau đó tôi xác định các lớp .show_tooltip như tooltip: $(".show_tooltip").tooltip();

Nguồn

2011-11-17 12:35:56 Greg

Thêm một mẹo công cụ để jstree rất đơn giản. Trước khi viết xuống các bước, hãy để tôi giải thích những gì tôi sẽ làm

Điều kiện tiên quyết: bạn nên sử dụng thư viện jquery và các phụ thuộc khác. Vì vậy, trong thẻ head của bạn, nó sẽ trông giống như thế này

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

Đoạn mã trên sẽ nhận được thư viện jquery và css bắt buộc. Ngoài ra, nó sẽ tạo kiểu bắt buộc cho đầu công cụ

Vì vậy, bây giờ cho các bước được thực hiện trên Jstree. lưu ý rằng viết iam câu trả lời này cho verison mới nhất của jstree 3.0.2

Chúng tôi sẽ cần cập nhật thông 'hover_node.jstree'

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

Đây là tất cả những gì bạn phải làm và jquery sẽ mất Chú ý phần còn lại để hiển thị chú giải công cụ

Lý do đằng sau điều này là jquery tự động kiểm tra nếu có thuộc tính tittle liên kết với bất kỳ nút nào (tức là phần tử) và sau đó hiển thị chú giải công cụ nếu có bất kỳ tiêu đề nào được liên kết. Vì vậy, tất cả những gì chúng tôi đang làm chỉ là thêm tiêu đề vào nút động. Điều này cho phép bạn linh hoạt thêm chú giải công cụ tùy chỉnh trên mỗi nút tùy thuộc vào dữ liệu của bạn cho mỗi nút hoặc bạn cũng có thể mã hóa cứng nếu nó là một nút cố định.

Đối với tùy biến hơn và phong cách bạn có thể tham khảo Jquery Tooltip

Nguồn

2014-08-26 08:08:21 Chetan

Cảm ơn bạn đã trả lời xuất sắc. Bạn đã cứu mạng tôi ở một mức độ nào đó. Tôi đang cố gắng tìm ra cách để hiển thị IMAGE cho chú giải công cụ và đầu của tôi sắp sửa xuất hiện. –

trong thuộc tính tiêu đề của nút, cố gắng sử dụng thẻ img với src của hình ảnh và xem nó có hoạt động hay không. – Chetan

Xin chào @Chetan, tôi đã cố gắng nhưng tất cả những gì tôi có thể làm là hiển thị cho tôi html làm mẹo công cụ. Tôi vẫn đang tìm ra một công việc xung quanh! –

Sử dụng "a_attr" hoặc "li_attr" để thêm một danh hiệu, tùy thuộc vào yếu tố nào bạn muốn title có thể vào, như ghi nhận ở đây: https://www.jstree.com/docs/json/

Nếu sử dụng "create_node" chức năng, sau đó làm điều đó như thế này:

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

trên sẽ hiển thị một tooltip trong trình duyệt. Nếu bạn muốn sử dụng chú giải công cụ tùy chỉnh (ví dụ: Bootstrap), thì bạn có thể chỉ cần gọi $ (". Show_tooltip").tooltip();

Nguồn

2017-12-06 14:32:04 Andrew

JQuery JSTree - thêm một ToolTip

Trả lời

Các vấn đề liên quan