Liebe Contaos,
für eine interaktive Landkarte versuche ich, ein SVG mit Tooltip-Funktion zu bauen.
Als "normale" - nicht in Contao erstellte - HTML-Seite funktioniert das auch, aber wenn ich den Code in Contao einfüge, erscheint gar nichts.
Hier ein einfacher Beispielcode:
Code:
<svg>
<style>
.tooltip{
font-size: 12px;
}
.tooltip_bg{
fill: white;
stroke: black;
stroke-width: 1;
opacity: 0.85;
}
</style>
<script>
<![CDATA[
function init(evt)
{
if ( window.svgDocument == null )
{
svgDocument = evt.target.ownerDocument;
}
tooltip = svgDocument.getElementById('tooltip');
tooltip_bg = svgDocument.getElementById('tooltip_bg');
}
function ShowTooltip(evt, mouseovertext)
{
tooltip.setAttributeNS(null,"x",evt.clientX+11);
tooltip.setAttributeNS(null,"y",evt.clientY+27);
tooltip.firstChild.data = mouseovertext;
tooltip.setAttributeNS(null,"visibility","visible");
length = tooltip.getComputedTextLength();
tooltip_bg.setAttributeNS(null,"width",length+8);
tooltip_bg.setAttributeNS(null,"x",evt.clientX+8);
tooltip_bg.setAttributeNS(null,"y",evt.clientY+14);
tooltip_bg.setAttributeNS(null,"visibility","visibile");
}
function HideTooltip(evt)
{
tooltip.setAttributeNS(null,"visibility","hidden");
tooltip_bg.setAttributeNS(null,"visibility","hidden");
}
]]>
</script>
<rect id="rect1" x="10" y="10" width="50" height="50" fill="red"
onmousemove="ShowTooltip(evt, 'Ich bin ein Tooltip')"
onmouseout="HideTooltip(evt)"/>
<rect class="tooltip_bg" id="tooltip_bg"
x="0" y="0" rx="4" ry="4"
width="55" height="17" visibility="hidden"/>
<text class="tooltip" id="tooltip"
x="0" y="0" visibility="hidden">Tooltip</text>
</svg>
Weiß jemand, was ich falsch mache? Ach ja, die notwendigen Tags sind alle eingetragen....
Danke für eure Hinweise
Sigrun
Lesezeichen