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

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

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

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

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

Ответы

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

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