Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Since the <code>&lt;set&gt;</code> element doesn't work with Firefox 3, I think you have to use ECMAScript.</p> <p>If you add the following script element into your SVG:</p> <pre><code> &lt;script type="text/ecmascript"&gt; &lt;![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"); } ]]&gt;&lt;/script&gt; </code></pre> <p>You need to add <code>onload="init(evt)"</code> into the SVG element to call the init() function.</p> <p>Then, to the end of the SVG, add the tooltip text:</p> <pre><code>&lt;text id="tooltip" x="0" y="0" visibility="hidden"&gt;Tooltip&lt;/text&gt; </code></pre> <p>Finally, to each of the element that you want to have the mouseover function add:</p> <pre><code>onmousemove="ShowTooltip(evt)" onmouseout="HideTooltip(evt)" mouseovertext="Whatever text you want to show" </code></pre> <p>I've written a more detailed explanation with improved functionality at <a href="http://www.petercollingridge.co.uk/interactive-svg-components/tooltip" rel="nofollow">http://www.petercollingridge.co.uk/interactive-svg-components/tooltip</a></p> <p>I haven't yet included multi-line tooltips, which would require multiple <code>&lt;tspan&gt;</code> elements and manual word wrapping.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload