Как сделать всплывающую подсказку на SVG, сгенерированную Рафаэлем

Question

Я делаю небольшое педагогическое упражнение, конвертирую XML в SVG с помощью XSLT, Javascript и Raphael.Я уверен, что это трудный путь ... но он образовательный.

Проблема, с которой я столкнулся, заключается в создании подсказок.До сих пор я нашел три способа сделать это:

1. Первый способ - использовать .attr({title: "blah"{) на объекте.Это работает, но официально он не поддерживается Рафаэлем, и контент, который я хочу вставить во всплывающую подсказку, может быть несколько длинным, что является проблемой, когда операционная система людей истекает время ожидания подсказки до того, как люди закончили ее читать.
2. Второй способ, который я нашел, это функция здесь .Он работает нормально для всплывающего объекта Raphael при наведении указателя мыши, но, насколько я могу судить, получить всплывающую подсказку, выглядящую нормально, невозможно.
3. Использование jquery Tooltipплагин .Это просто не похоже на работу.Я не могу заставить Рафаэля добавить атрибут title к объекту и получить его, чтобы выбрать этот заголовок.Не знаю почему.

Итак, я хотел бы знать, что это простой и надежный способ добавлять всплывающие подсказки к объектам Raphael, чтобы они появлялись, когда люди наводят курсор мыши на объект, и исчезали, когда онимышка (но не раньше)?

Answer 1

Один из способов сделать это - использовать тег div поверх бумаги Рафаэля.Затем используйте Jquery mousevents вместе с fadeIn () и fadeOut ().Я создал пример на jsFiddle. Посмотрите

Answer 2

Если вы используете атрибуты [title], элементы будут обернуты ссылками, что упрощает использование плагинов всплывающей подсказки, таких как qtip .

var R = Raphael('canvas', 100, 100);
R.path(path).attr({ title: 'Fancy tooltip' });

$('#canvas a').qtip();

Answer 3

В случае, если кто-то будет искать пример всплывающей подсказки над g-диаграммами Rapahel (я полагаю, что ее можно легко использовать и с простым Rapahel-ом), я использовал такую, которая использует динамически созданный div (, поэтому плагин для подсказок третьей части не нужен ), который выступает в качестве всплывающей подсказки над круговой диаграммой

Интерактивная круговая диаграмма с всплывающей подсказкой

Использует мышиный ход и мышеловку Рафаэля ...

b.t.w Я использую легенду в качестве источника всплывающей подсказки - ее, разумеется, нельзя заменять другим текстом (просто замените this.label[1].attrs.text другим текстом)

Answer 4

Я использовал qtip для добавления подсказок:

http://jsfiddle.net/chrisloughnane/h5WU9/