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

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

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

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

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


svg jquery tooltip raphael
person mlissner    schedule 05.08.2010    source источник
comment
Я пытаюсь добиться того же - вы нашли хорошее решение?   -  person codeinthehole    schedule 06.02.2011
comment
Не важно. Я думаю, что я только что присвоил вещам атрибуты заголовка ... хотя и не положительно.   -  person mlissner    schedule 07.02.2011

Ответы (4)


arrow_upward
12
arrow_downward

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

person Zevan    schedule 30.11.2010
comment
Это выглядит хорошо. Любопытно, есть ли в этом подходе что-то принципиально отличное от большинства плагинов всплывающих подсказок? Я попробую и вернусь. У меня были проблемы с clientX и clientY, работающими не во всех браузерах. - person tfwright; 01.12.2010
comment
Да, я заставил это немного работать, но мой SVG центрирован в наложении div, и всплывающая подсказка появляется примерно на 400 пикселей справа от того места, где она должна быть. - person tfwright; 01.12.2010
comment
если вы используете свойства offsetX и offsetY, а не свойства clientX и clientY, это решит вашу проблему. - person Zevan; 01.12.2010
comment
Это работает в Safari и Chrome, но в Firefox всплывающая подсказка появляется в верхнем левом углу содержащего div. Есть ли кроссбраузерное решение? - person tfwright; 02.12.2010
comment
e.pageX и e.pageY — это то, что вам нужно. Я думаю, что Jquery делает эти кросс-браузерные. - person Zevan; 02.12.2010
comment
Небольшая настройка библиотеки, но я также подтвердил, что это работает. Молодец! - person Blender; 06.12.2010

arrow_upward
7
arrow_downward

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

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

$('#canvas a').qtip();
person neojp    schedule 22.11.2011
comment
Bootstrap3 также имеет плагин всплывающей подсказки, и он отлично работает с вашим методом. Спасибо за подсказку. - person koppor; 10.09.2013
comment
Я не мог заставить его работать, есть идеи, как это сделать? он отображает текст всплывающей подсказки внизу страницы, но без ошибок js. - person jpganz18; 04.10.2014
comment
@ jpganz18 Это будет означать, что ваш код всплывающей подсказки работает, просто он отображается не в том месте. Возможно, из-за неправильных стилей в вашем CSS или из-за того, что используемый вами плагин всплывающей подсказки не распознает координаты. Кроме того, Рафаэль, возможно, изменил то, как все работает, спустя 3 года после того, как я опубликовал это. - person neojp; 21.11.2014

arrow_upward
2
arrow_downward

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

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

Он использует mousemove и mouseout Рафаэля...

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

person Daniel    schedule 12.06.2012
comment
Дэниел: Можем ли мы получить атрибуты, такие как штрих, радиус, из объекта круговой диаграммы Рафаэля... см. этот вопрос: stackoverflow.com/questions/15846655/ Я застрял... Заранее спасибо за вашу помощь - person Chirag Tayal; 06.04.2013

arrow_upward
1
arrow_downward

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

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

person chris loughnane    schedule 12.06.2012
comment
Вы используете IE10? Мой пример работает в хроме и на моем S4. Мой jsfiddle — довольно старый пример. Проверьте qtip2.com/demos, чтобы найти работающие демоверсии. - person chris loughnane; 22.10.2013