用于SVG元素的Javascript工具提示

Question

I have one SVG which works as a top bar with some headlines. It consists of many rectangles with some text and I would like to show tooltips for each of them when user mouseover it.

I tried to implement something like this but I need to keep the .js code in separate file, because I am generating my svg files dynamically. However, nothing happens when I mouseover my elements (rectangles in the svg). I think taht the problem micht be with referencing my svg in the script but I am not sure what is wrong.

Here is the exmaple of my code (I deleted some non-important parts to keep it readable.)

SVG:

    <svg contentScriptType="text/ecmascript" width="760" 
    xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" contentStyleType="text/css"
    height="140" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"
        onload="init(evt)" version="1.0">
    <script xlink:href="script.js" xlink:actuate="onLoad" xlink:type="simple" xlink:show="other" type="text/ecmascript" xmlns:xlink="http://www.w3.org/1999/xlink"/><rect x="0" width="120" height="140" y="0" 
    style="fill:#DEE7EF"/><rect x="120" y="0" width="30" style="fill:#9CAAC6" 
    onmouseout="HideTooltip(evt)" height="140" onmousemove="ShowTooltip(evt, 
    &apos;BlueServiceESB#BlueListener&apos;)"><text fill="black" x="0" id="tooltip" font-
    size="10" y="0" visibility="hidden">BlueServiceESB#BlueListener</text></rect></svg>

I know it might look confusing, if so, I will try to replace my text elements with some other stuff to make it more readable, let me know in comments...

My script.js file

// tooltip
function ShowTooltip(evt, mouseovertext)
{
    tooltip.setAttribute("x",evt.clientX+11);
    tooltip.setAttribute("y",evt.clientY+27);
    tooltip.firstChild.data = mouseovertext;
    tooltip.setAttribute("visibility","visible");
}

function HideTooltip(evt)
{
    tooltip.setAttribute("visibility","hidden");
}

// init for tooltip functions
function init(evt)
{
    if ( window.svgDocument == null )
    {
    svgDocument = evt.target.ownerDocument;
    }

    tooltip = svgDocument.getElementById('tooltip');

}

Could you tell me what am I doing wrong here? Thanks a lot!

Answer 1

Remove the init function and just find the tooltip element each time. So your script will look like:

function ShowTooltip(evt, mouseovertext) {
    var tooltip = document.getElementById('tooltip');
    tooltip.setAttribute("x", evt.clientX + 11);
    tooltip.setAttribute("y", evt.clientY + 27);
    tooltip.firstChild.data = mouseovertext;
    tooltip.setAttribute("visibility", "visible");
}

function HideTooltip(evt) {
    var tooltip = document.getElementById('tooltip');
    tooltip.setAttribute("visibility", "hidden");
}

I think there's also a couple of issues with the SVG (maybe because of the way it's generated). The most important point is to not wrap the text in the rect element. This works:

    <svg width="760" height="140" xmlns="http://www.w3.org/2000/svg" version="1.0">

        <rect x="0" width="120" height="140" y="0" style="fill:#DEE7EF" />
        <rect x="120" y="0" width="30" height="140" style="fill:#9CAAC6"
            onmouseout="HideTooltip(evt)" 
            onmousemove="ShowTooltip(evt, &apos;BlueServiceESB#BlueListener&apos;)" />

        <text x="0" y="0" width="20" height="10" fill="black" id="tooltip" font-size="10"  visibility="hidden">BlueServiceESB#BlueListener</text>
    </svg>

Answer 2

1) First off all you should use ';' ( style="fill:#9CAAC6;" ) in style attribute and every js code ( onmouseout="HideTooltip(evt);" )

2) Change

onmouseout="HideTooltip(evt)"

to

onmouseout="HideTooltip(evt); return false;"

3) I think that easy to use jquery instead native js

I) Add an id for your shape(in your case rect)

II) Make

$('#rect_id').on('mouseover',function(e){
   // do your stuff here
});
$('#rect_id').on('mouseout',function(e){
   // do your stuff here
});

As an example take a look at http://jqvmap.com/ . Tooltip implemented there as i wrote above.