如何在JavaScript工具提示中进行换行

Question

In this svg file(KLICK ME) I want to have a more detailed tooltip with more line in it. So I need some kind of linebreak. I tried allready \\n , <br> and 
 with no effect... And I couldn't find anything more on the webs, so I hope some javascript crack may help me :D

Here goes my code:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="440" height="391" onload="init(evt)" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:white;">
  <style>
    .tooltip{
      font-family: Verdana;
      fill:white;
    }
    .tooltip_bg{
      fill: black;
      opacity: 0.5;
    }
  </style>

  <script type="text/ecmascript">
    <![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+11);
        tooltip_bg.setAttributeNS(null,"visibility","visibile");
      }
      function HideTooltip(evt){
        tooltip.setAttributeNS(null,"visibility","hidden");
        tooltip_bg.setAttributeNS(null,"visibility","hidden");
      }
    ]]>
  </script>

  <a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 01')" onmouseout="HideTooltip(evt)">
    <rect x="100" y="0" ry="1" width="40" height="50" style="fill:gold;" />
  </a>
  <a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 01')" onmouseout="HideTooltip(evt)">
    <text x="120" y="25" text-anchor="middle" dominant-baseline="central" font-family="sans-serif">01</text>
  </a>
  <a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 02')" onmouseout="HideTooltip(evt)">
    <rect x="200" y="0" ry="1" width="40" height="50" style="fill:gold;" />
  </a>
  <a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 02')" onmouseout="HideTooltip(evt)">
    <text x="220" y="25" text-anchor="middle" dominant-baseline="central" font-family="sans-serif">02</text>
  </a>
  <rect class="tooltip_bg" id="tooltip_bg" x="0" y="0" ry="2" width="55" height="21" visibility="hidden"/>
  <text class="tooltip" id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>
</svg>

Answer 1

Why not use native toolips which should support this?

<a xlink:href="webseite.html">
  <title>Toolip
zu b</title>
  <rect x="100" y="0" ry="1" width="40" height="50" style="fill:gold;" />
</a>

Otherwise you'll need to create multiple <text> elements or embed <tspan> elements in the <text> elements so you can assign dy offsets to simulate line breaks. Ie you'll have to code multiple line support yourself from scratch.

You'll need to generate something like

<text x="10" y="20">Toolip<tspan x="10" dy="1em">zu b</tspan></text>

where the x and y values vary depending on where your object is.

Or. if you don't care about IE support use a foreignObject element for the tooltips and rely on html's text formatting capability to insert line breaks automatically.

Answer 2

You can use an absolute div with a higher z-index as a tooltip if needs be. This supports any sort of html formatting inside it, as it is just a div tag.

Here is a fiddle to demonstrate: http://jsfiddle.net/pbja2ju6/