2012-07-03 4 views
0

Я хочу показать всплывающую подсказку (используя qtip) для наведения указателя на узел. Для этого внутриИзвлечение элемента svg из объекта node в cytoscape.js

cy.nodes().bind("mouseover", function() { ... } 

Мне нужно привязать всплывающую подсказку к определенному элементу svg. Я не могу найти функцию в общедоступном интерфейсе узла, которая вернет элемент svg для этого, а также способ, которым я мог бы напрямую добавлять атрибуты к элементу svg отдельного узла во время инициализации. Cy, безусловно, имеет эту информацию svg, хранящуюся в ее _private. Конечно, я мог бы найти элемент svg, вызвав node.position(), а затем выполнив поиск соответствующего элемента svg, но есть ли более чистый способ его получить прямо из интерфейса объекта узла?

Редактировать: Предложение Атанаса работает, но я не уверен, является ли это постоянным решением. Я хочу, чтобы TOOLTIP отключен отведение указателя мыши/масштабирование/панорамирование/грейфера/выбор/.. а это значит, мне нужно, чтобы связать

$(".ui-tooltip").qtip('hide'); 

к тем событиям, на су. Я предпочел бы полагаться на события qtip и задержки при отображении всплывающей подсказки. Теперь всплывающая подсказка выглядит немного ошибкой, так как она сразу же скрывается от этих событий.

ответ

0

Я недавно сделал более-менее то же самое - показывая qtips на узлах - и он работает. Вот мой код, надеюсь, что это помогает:

cy.nodes().bind("mouseover", function(oEvent){ 
     var eid = this.data("id"); 

     $qtipDiv.css({ 
      "left": oEvent.clientX, 
      "top": oEvent.clientY, 
     }); 

     var menutext = "some text to be shown in tooltip"; 

     $qtipDiv.qtip({ 
      content: { 
       text: menutext 
      }, 
      show: { 
       delay: 0, 
       event: false, 
       ready: true, 
       effect: false 
      }, 
      position: { 
       viewport: true, 
       adjust: { 
        method: "shift" 
       } 
      }, 
      style: { 
       classes: "ui-tooltip-tipsy" 
      } 
     }); 
    }); 
+0

до этого у меня есть 'var $ qtipDiv = $ (" # qtip-div ");' –

+0

Странно. Теперь у меня есть два div: #qtipDiv и #cy после него. Когда я пробую ваш тест, всплывающая подсказка отображается после #cy div, независимо от координат x, y (т. Е. Тот же эффект при выходе из команды $ qtipDiv.css). – amergin

+0

Nevermind, он работает, определяя «цель» в позиции, как описано в http://craigsworks.com/projects/qtip2/docs/position/. Благодаря! – amergin

2

Cytoscape.JS был недавно обновлен, чтобы использовать визуализатор HTML5 Canvas для увеличения производительности. (Это произошло примерно в августе-сентябре 2012 года)

Получение позиций событий для зависания узлов не полностью реализовано с текущей бета-версии, но это действительно очень важная функция.

Вы можете подтвердить статус реализации, введя это в консоли Javascript:

cy.nodes().bind("mouseover", function(e) {console.log(e)}) 

Эта функция должна быть реализована очень скоро.