JQuery JSTree - 툴팁 추가

JSTree 노드에 Tooltip을 추가 할 수 있습니까? 사용자가 요소 위로 마우스를 가져 가면 추가 정보를 표시하려고합니다.JQuery JSTree - 툴팁 추가

JQuery에 관해서는 꽤 밀도가 높기 때문에 이에 대한 분명한 대답이있을 수 있습니다.

편집 : 아래 zzzz 덕분에 간단한 호버 상자가 나타납니다. 툴팁 페이지의 지침에 따라 div을 fieldset 안에 넣어도 여전히 멋진 JQuery 툴팁을 적용 할 수 없습니다.

출처

2011-08-17 Haphazard

그냥 붙잡혀있는 나무의 노드에 제목 속성을 추가하는 것이 아닙니까? 공상 아무것도 .. 내가 동적으로 create_node 기능을 사용하여 내 jstree 만들

출처

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 여기? –

$("#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에서 수행 할 작업을 수행하십시오. 그 스피 쓰기를 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는 어떤 노드 (즉, 요소)와 연관된 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" 
    });

는 위의 브라우저에서 툴팁이 표시됩니다. 맞춤 툴팁 (예 : 부트 스트랩)을 사용하려면 $ (". show_tooltip")을 호출하면됩니다.툴팁();

출처

2017-12-06 14:32:04 Andrew

JQuery JSTree - 툴팁 추가

답변

관련 문제