Исправлено положение всплывающих подсказок Tipsy на узлах пути Рафаэля.

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

У меня есть страница, на которой отображаются изображения с выделенными областями при наведении через Raphaël. Я также работал над добавлением подсказок Tipsy к этим наведениям, чтобы вы могли видеть, что каждая часть изображения называется.

Рафаэль рисует выделенные области с помощью SVG, а поскольку элементы SVG также являются DOM-узлами, присоединение к ним Tipsy легко выполняется следующим образом:

// Get the path node as a jQuery object.
pathNode = $(path.node);

// Set the title so it's available to tipsy.
pathNode.attr('title', element.title);

// Add a Tipsy tooltip to each node, if Tipsy is loaded.
if ($.fn.tipsy) {
  pathNode.tipsy({
    fade: true
  });
}

Проблема только в ложке дегтя, а причина этого вопроса в том, что Tipsy рисует всплывающую подсказку в верхней части экрана (по координатам 0,0) вместо того, чтобы рядом с SVG-узлом, и я не могу понять, как это сделать. почини это. При отладке Tipsy JavaScript кажется, что в какой-то момент у него есть координаты, но все равно не удается отрисовать в нужном месте.

Кто-нибудь может понять это? (Подробности см. в минимальном тестовом примере).


javascript svg tooltip raphael tipsy
person mikl    schedule 19.02.2011    source источник
comment
Этот браузер специфичен? Я только что проверил ваш пример в Chrome (Linux), и он работает нормально.   -  person TigrisC    schedule 20.02.2011
comment
Подсказки помещаются в (0,0) как в Firefox, так и в Safari на моем Mac, но да, в Chrome это работает нормально.   -  person mikl    schedule 20.02.2011

Ответы (2)


arrow_upward
2
arrow_downward

Попробуйте использовать gRaphaël для получения этих советов.

Посмотрите на этот пример, который я только что написал: http://jsfiddle.net/3tHmp/

person rsp    schedule 19.02.2011
comment
Да, я думал сделать это с помощью gRaphaël, но я бы предпочел использовать ту же библиотеку для всплывающих подсказок в HTML и SVG, если это возможно. - person mikl; 20.02.2011

arrow_upward
0
arrow_downward

Ваша демонстрация также показывает всплывающие подсказки на 0,0 на iPhone. Когда кусочки становятся красными, вы можете определить min x и min y с помощью getBBox(). Поместите подсказку соответственно?

person Chasbeen    schedule 20.02.2011
comment
Подсказка размещена не в коде Raphaël, а в библиотеке Tipsy, поэтому getBBox() здесь не подходит, так как она предназначена для всех видов узлов DOM. - person mikl; 20.02.2011