Как создать всплывающую подсказку SVG?

Учитывая существующий действительный документ SVG, как лучше всего создать «информационные всплывающие окна», чтобы при наведении курсора или щелчке по определенным элементам (скажем), вы появлялись всплывающие окна с произвольным количеством (т. е. не просто всплывающей подсказкой с одной строкой) Дополнительная информация?

Это должно отображаться правильно, по крайней мере, в Firefox и быть невидимым, если изображение было растрировано в растровый формат.


svg popup tooltip
person morais    schedule 19.09.2008    source источник
comment
Мораис, это может помочь, если вы немного сузите вопрос. Может быть, немного более конкретно о том, какие технологии вам доступны и какие браузеры вам нужно поддерживать (Firefox и какие еще?) Просто предложение.   -  person Onorio Catenacci    schedule 19.09.2008
comment
Принятый ответ устарел, но ответ Нила Фрейзера по-прежнему верен.   -  person Craig    schedule 22.12.2014

Ответы (4)


arrow_upward
25
arrow_downward 

<svg>
  <text id="thingyouhoverover" x="50" y="35" font-size="14">Mouse over me!</text>
  <text id="thepopup" x="250" y="100" font-size="30" fill="black" visibility="hidden">Change me
    <set attributeName="visibility" from="hidden" to="visible" begin="thingyouhoverover.mouseover" end="thingyouhoverover.mouseout"/>
  </text>
</svg>

Дополнительные пояснения можно найти здесь .

person Sparr    schedule 19.09.2008
comment
Кажется, это не работает в Firefox 3.0.1 — так и должно быть? - person morais; 22.09.2008
comment
Ссылка на сайт IBM сейчас не работает. - person kasuparu; 04.03.2014
comment
@kasuparu Я только что отправил отзыв в IBM о неработающей ссылке. Некоторые файлы в этом каталоге все еще существуют, так что это может быть ошибкой. - person Sparr; 04.03.2014
comment
голосование против, потому что ссылка не была исправлена. - person Eric Bloch; 30.07.2015
comment
Я отправил запрос в IBM на восстановление удаленного контента по ссылке. - person Sparr; 27.10.2015
comment
поменял ссылку на archive.org - person Sparr; 14.11.2015

arrow_upward
53
arrow_downward

Этот вопрос был задан в 2008 году. За прошедшие четыре года SVG быстро улучшилась. Теперь всплывающие подсказки полностью поддерживаются на всех известных мне платформах. Используйте тег <title> (не атрибут), и вы получите встроенную всплывающую подсказку.

Вот документы: https://developer.mozilla.org/en-US/docs/SVG/Element/title

person Neil Fraser    schedule 15.10.2012
comment
Примечание. Похоже, это не работает, когда вы добавляете его динамически с помощью javascript. - person bzuillsmith; 16.04.2013
comment
Кроме того, вы не можете стилизовать собственные всплывающие подсказки :( - person CpILL; 01.08.2013
comment
Я использовал это с инфраструктурой визуализации d3, чтобы добавить всплывающую подсказку с помощью javascript, и это сработало для меня в последних версиях chrome и firefox. Код был что-то вроде chart.selectAll("g.cell.child").append("title").text(function(d) { return d.size;} ); - person Pat; 16.09.2013
comment
Кажется, это работает в Firefox (50.0), но не в Chrome (54.0.2840.100). - person joelittlejohn; 28.11.2016

arrow_upward
2
arrow_downward

Поскольку элемент <set> не работает с Firefox 3, я думаю, вам придется использовать ECMAScript.

Если вы добавите следующий элемент скрипта в свой SVG:

  <script type="text/ecmascript"> <![CDATA[

    function init(evt) {
        if ( window.svgDocument == null ) {
        // Define SGV
        svgDocument = evt.target.ownerDocument;
        }
        tooltip = svgDocument.getElementById('tooltip');
    }

    function ShowTooltip(evt) {
        // Put tooltip in the right position, change the text and make it visible
        tooltip.setAttributeNS(null,"x",evt.clientX+10);
        tooltip.setAttributeNS(null,"y",evt.clientY+30);
        tooltip.firstChild.data = evt.target.getAttributeNS(null,"mouseovertext");
        tooltip.setAttributeNS(null,"visibility","visible");
    }

    function HideTooltip(evt) {
        tooltip.setAttributeNS(null,"visibility","hidden");
    }
    ]]></script>

Вам нужно добавить onload="init(evt)" в элемент SVG, чтобы вызвать функцию init().

Затем в конец SVG добавьте текст всплывающей подсказки:

<text id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>

Наконец, к каждому элементу, для которого вы хотите иметь функцию наведения мыши, добавьте:

onmousemove="ShowTooltip(evt)"
onmouseout="HideTooltip(evt)"
mouseovertext="Whatever text you want to show"

Я написал более подробное объяснение с улучшенной функциональностью по адресу http://www.petercollingridge.co.uk/interactive-svg-components/tooltip

Я еще не включил многострочные всплывающие подсказки, для которых потребовалось бы несколько элементов <tspan> и ручной перенос слов.

person Peter Collingridge    schedule 28.01.2011

arrow_upward
1
arrow_downward

Это должно работать:

nodeEnter.append("svg:element")
   .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
   .append("svg:title")
   .text(function(d) {return d.Name+"\n"+d.Age+"\n"+d.Dept;}); // It shows the tool tip box with item [Name,Age,Dept] and upend to the svg dynamicaly
person Aravind Cheekkallur    schedule 21.08.2013