Как создать всплывающую подсказку в формате SVG?
Учитывая существующий действительный документ SVG, как лучше всего создавать «информационные всплывающие окна», чтобы при наведении указателя мыши или щелчке на определенных элементах (скажем) вы открывали окно с произвольным количеством (т.е. не просто всплывающей подсказкой из одной строки) Дополнительная информация?
Это должно отображаться правильно, по крайней мере, в Firefox, и быть невидимым, если изображение было растеризовано в растровый формат.
Принятый ответ теперь устарел, но ответ Нила Фрейзера по-прежнему верен.
Ответы 4
<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>
Дальнейшее объяснение можно найти в здесь.
Похоже, это не работает в Firefox 3.0.1 - это должно быть?
Ссылка на сайт IBM сейчас не работает.
@kasuparu Я только что отправил в ibm отзыв о неработающей ссылке. Некоторые файлы в этом каталоге все еще существуют, поэтому это может быть ошибкой.
голосование против, потому что ссылка не была исправлена.
Я отправил в IBM запрос на восстановление удаленного содержимого по ссылке.
изменил ссылку на archive.org
Поскольку элемент <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> и ручной перенос слов.
Этот вопрос был задан в 2008 году. За прошедшие четыре года SVG быстро улучшилась. Теперь всплывающие подсказки полностью поддерживаются на всех известных мне платформах. Используйте тег <title> (не атрибут), и вы получите встроенную всплывающую подсказку.
Вот документы: https://developer.mozilla.org/en-US/docs/SVG/Element/title
Примечание. Кажется, это не работает, если вы добавляете его динамически с помощью javascript.
Кроме того, вы не можете стилизовать собственные подсказки к инструментам :(
Я использовал это с фреймворком визуализации d3, чтобы добавить всплывающую подсказку с помощью javascript, и это сработало для меня в последних версиях chrome и firefox. Код был что-то вроде chart.selectAll("g.cell.child").append("title").text(function(d) { return d.size;} );
Кажется, это работает в Firefox (50.0), но не в Chrome (54.0.2840.100).
Это должно работать:
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
Мораис, это может помочь, если вы немного сузите вопрос. Может быть, более конкретно о том, какие технологии вам доступны и какие браузеры вам нужно поддерживать (Firefox и что еще?) Просто предложение.