JQuery JSTree - 添加工具提示

有沒有辦法將Tooltip添加到JSTree節點？我想在用戶懸停在某個元素上時顯示額外的信息。JQuery JSTree - 添加工具提示

對於JQuery，我非常密集，因此可能會有明顯的答案。

編輯：感謝zzzz下面，我能夠得到一個簡單的懸停框彈出。儘管將樹的div置於fieldset之內，但仍然無法將精美的JQuery工具提示應用於該工具提示，因爲工具提示頁面中的說明會提示。

來源

2011-08-17 Haphazard

是不是隻是添加一個標題屬性到您的節點在樹上的懸停？沒有什麼花哨..

來源

2011-08-17 17:21:06 Baz1nga

感謝您的提示。有了這個，我可以得到一個基本的HTML工具提示顯示。雖然這可能足夠好，但我仍想知道如何在節點懸停時觸發花哨的JQuery工具提示。 – Haphazard

標準工具提示可以通過在JSON數據中設置'node [a_attr] [title]'來實現。 – cweiske

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

來源

2011-09-08 19:32:36

要捕捉鼠標離開節點，請查找'dehover_node.jstree'事件。只是在這裏作爲參考。 – arvidkahl

'data.rslt.obj.attr（「id」）究竟是什麼''我的意思是什麼是數據，rslt，obj在這裏？ –

創建動態使用create_node功能我jstree：

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

來源

2011-11-17 12:35:56 Greg

添加工具提示中jstree非常簡單。在寫下步驟之前，讓我解釋我會做什麼

先決條件：您應該使用jQuery庫和其他依賴項。因此，在你的頭標記它應該是這個樣子

<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上進行。注意，IAM寫這個答案jstree的最新verison 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會自動檢查是否有任何節點（即元素）相關的tittle屬性，然後顯示工具提示，如果有任何標題關聯。因此，我們所做的只是將標題動態添加到節點。這使您可以靈活地在每個節點上添加自定義工具提示，具體取決於每個節點的數據，或者如果它是固定的，也可以硬編碼。

欲瞭解更多自定義和造型，你可以參考 Jquery Tooltip

來源

2014-08-26 08:08:21 Chetan

謝謝你的傑出答案。你在一定程度上拯救了我的生命。我試圖弄清楚如何讓它顯示一個工具提示圖像，我的頭即將脫落。 –

在節點的title屬性中，嘗試將img標籤與圖像的src一起使用，看看它是否有效。 – Chetan

嗨@Chetan，我確實嘗試過，但我所能做的就是爲我顯示html作爲工具提示。我仍然在搞清楚工作！ –

使用「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」）。工具提示（）;

來源

2017-12-06 14:32:04 Andrew

JQuery JSTree - 添加工具提示

回答

相關問題