[javascript] Cytoscape.js에서 그래프의 특정 요소에 대한 툴팁을 추가하는 방법은 무엇인가요?

Cytoscape.js는 그래프 시각화를 위한 JavaScript 라이브러리입니다. 특정 요소에 대한 툴팁을 추가하는 방법은 다음과 같습니다:

  1. Cytoscape.js 라이브러리를 로드합니다.
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
  1. 그래프 컨테이너를 생성하고 크기를 지정합니다.
<div id="cy" style="width: 600px; height: 400px;"></div>
  1. 그래프를 생성하고 특정 요소에 툴팁을 추가합니다.
var cy = cytoscape({
  container: document.getElementById('cy'),
  
  elements: [
    // 그래프 요소 정의
  ],
  
  style: [
    // 그래프 스타일 정의
  ],
  
  layout: {
    // 그래프 레이아웃 설정
  }
});

// 그래프 요소에 툴팁 추가
var element = cy.getElementById('특정 요소 ID');
element.qtip({
  content: '툴팁 내용',
  show: {
    event: 'mouseover'
  },
  hide: {
    event: 'mouseout'
  }
});

위의 예시 코드에서는 특정 요소 ID에 해당하는 그래프 요소에 마우스를 올리면 툴팁 내용이 표시됩니다. 툴팁은 마우스가 요소에 올라갈 때만 보이고, 마우스가 요소를 벗어나면 사라집니다.

Cytoscape.js에서는 다양한 방식으로 그래프 요소에 대한 툴팁을 추가할 수 있으며, qtip API를 사용하여 세부적인 설정을 할 수도 있습니다. 자세한 내용은 Cytoscape.js 문서를 참고하시기 바랍니다.