1. 엣지에 툴팁 추가하기: 엣지에 툴팁을 추가하여 엣지에 대한 간단한 정보를 표시할 수 있습니다. 이를 위해서는 엣지를 선택했을 때 툴팁을 표시하는 이벤트 핸들러를 등록해야 합니다. 아래는 예시 코드입니다:

   cy.on('mouseover', 'edge', function(event){
     var edge = event.target;
     var tooltipContent = '엣지 정보: ' + edge.data('label');
     edge.tooltip({
       content: tooltipContent
     });
   });
   

   이 코드는 마우스 포인터가 엣지 위로 올라갔을 때 해당 엣지의 정보를 툴팁으로 표시합니다. data('label')은 엣지의 라벨 값을 가져온 것입니다. 필요한 경우 툴팁 스타일을 커스터마이즈할 수도 있습니다.

2. 다른 요소와 연결하여 정보 표시하기: 다른 요소와 연결하여 상세한 정보를 엣지와 함께 표시하는 방법도 있습니다. 이를 위해 엣지와 연결된 요소(예: 노드)를 클릭했을 때 정보를 표시하는 이벤트 핸들러를 등록할 수 있습니다. 아래는 예시 코드입니다:

   cy.on('click', 'edge', function(event){
     var edge = event.target;
     var connectedNode = edge.target();
     var additionalInfo = '엣지에 연결된 요소 정보: ' + connectedNode.data('label');
     // 추가 정보를 표시하는 로직을 구현합니다.
   });
   

   이 코드는 엣지를 클릭했을 때 연결된 요소의 정보를 추가로 표시합니다. target() 함수를 사용해 엣지와 연결된 요소를 가져올 수 있고, data('label')을 사용하여 해당 요소의 라벨 값을 가져올 수 있습니다. 추가 정보를 어떻게 표시할지는 개발자의 선택에 따라 다를 수 있습니다.

위의 두 가지 방법을 조합하여 엣지에 대한 툴팁과 상세 정보를 함께 표시하는 기능을 구현할 수도 있습니다. Cytoscape.js의 다양한 옵션을 사용하여 원하는 디자인과 동작을 구현할 수 있습니다.

훌륭한 자료로는 Cytoscape.js 공식 문서(https://js.cytoscape.org/)와 예제들을 참고할 수 있습니다.