Подтвердить что ты не робот

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

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

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

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

Ответ 3

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

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

Он использует mousemove и mouseout для raphael...

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