How to jump line in tooltip?

Question

Hello, I’m trying to put balloons with information on my SVG map (when I hover over the map the information appears), however, when I try to put information like city and phone the information line becomes giant. How do I skip line and better organize the information ? Follows below my code:

html

<div id="mapa">

 <svg xmlns="http://www.w3.org/2000/svg"
 width="5.72334in" height="5.44001in"
 onload="init(evt)"
 viewBox="0 0 1717 1632"> 

       <path id="Amazonas"
         onmousemove="ShowTooltip(evt,'Manaus:(92)3231-1424')"
         onmouseout="HideTooltip()"
         fill="none" stroke="black" stroke-width="4"
         d="M 483.00,131.00
         C 483.00,131.00 493.98,146.00 493.98,146.00
         493.98,146.00 498.84,155.00 498.84,155.00
         498.84,155.00 505.28,163.00 505.28,163.00
         505.28,163.00 511.04,177.00 511.04,177.00
         514.63,187.09 511.10,193.03 512.17,203.00
         512.17,203.00 514.71,216.00 514.71,216.00
         514.71,216.00 515.67,227.00 515.67,227.00
         516.80,232.32 518.39,234.13 519.00,240.00
         516.25,240.45 513.46,241.01 512.40,244.06
         510.76,248.74 516.78,251.80 520.00,253.61
         531.51,260.09 532.93,265.73 539.04,269.89
         542.18,272.04 546.20,273.69 549.98,272.26
         563.31,267.20 551.59,248.96 562.19,240.85
         563.66,239.73 565.26,239.05 567.00,238.47
         569.18,237.74 572.69,236.86 574.91,237.64
         580.01,239.43 582.43,249.83 591.00,251.35
         596.68,252.36 603.22,246.68 605.69,242.00
         607.47,238.63 607.12,234.84 609.41,231.21
         611.92,227.24 616.33,226.34 619.20,220.00
         620.92,216.20 620.71,212.26 623.43,209.39
         627.04,205.58 631.35,206.28 636.00,205.83
         636.00,205.83 664.00,205.00 664.00,205.00
         664.87,211.63 666.87,229.73 668.81,235.00
         668.81,235.00 681.63,258.00 681.63,258.00
         683.25,261.29 684.03,265.02 686.42,267.90
         686.42,267.90 693.32,274.21 693.32,274.21
         695.31,276.64 696.58,280.62 701.00,282.82
         704.39,284.51 706.79,283.30 710.00,283.47
         710.00,283.47 722.00,286.35 722.00,286.35
         725.95,286.62 727.81,284.74 732.00,285.65
         737.47,286.83 750.51,296.80 755.28,300.65
         760.68,305.00 763.96,303.13 765.39,306.31
         767.01,309.92 762.14,318.40 760.58,322.00
         760.58,322.00 741.42,365.00 741.42,365.00
         741.42,365.00 702.58,452.00 702.58,452.00
         702.58,452.00 691.42,477.00 691.42,477.00
         691.42,477.00 686.89,488.00 686.89,488.00
         685.77,494.50 692.20,495.61 695.77,502.00
         698.43,507.47 696.48,513.23 695.77,519.00
         695.21,527.63 689.28,526.07 687.70,532.00
         686.67,535.89 690.38,538.74 690.67,543.00
         690.95,546.92 688.27,549.92 687.39,554.00
         686.31,558.98 689.19,568.98 682.94,570.90
         681.59,571.06 678.50,571.00 677.00,570.90
         677.00,570.90 575.00,570.90 575.00,570.90
         564.15,570.98 566.21,569.40 557.00,567.24
         557.00,567.24 545.00,565.49 545.00,565.49
         545.00,565.49 535.00,560.32 535.00,560.32
         535.00,560.32 525.04,556.36 525.04,556.36
         516.96,551.50 515.31,542.39 508.99,539.09
         505.52,537.41 497.48,538.99 493.00,539.09
         488.95,539.01 480.39,538.22 477.26,540.60
         474.51,542.68 471.15,550.02 468.39,552.05
         465.94,553.85 461.30,553.37 457.97,559.02
         455.10,563.89 454.72,573.35 451.57,576.35
         447.57,580.17 439.39,579.86 433.00,582.47
         424.33,586.01 418.85,593.33 414.00,601.00
         402.81,598.39 402.60,605.92 394.00,604.76
         388.83,604.07 380.04,596.52 368.00,602.68
         360.26,606.64 351.11,621.48 342.00,619.85
         342.00,619.85 308.00,608.05 308.00,608.05
         308.00,608.05 241.00,579.69 241.00,579.69
         241.00,579.69 212.00,565.42 212.00,565.42
         193.71,557.47 192.00,559.09 174.00,555.74
         174.00,555.74 141.00,549.08 141.00,549.08
         141.00,549.08 112.00,544.58 112.00,544.58
         93.65,540.47 81.28,529.30 65.00,527.00
         68.93,515.50 80.63,516.01 86.26,507.00
         89.14,502.39 86.79,495.73 87.02,490.00
         87.33,482.38 91.19,481.87 93.86,476.00
         95.20,473.07 94.99,470.14 95.00,467.00
         95.01,461.57 94.14,453.69 98.42,449.64
         101.33,446.87 105.33,446.66 110.00,442.78
         110.00,442.78 119.00,434.30 119.00,434.30
         127.13,427.34 137.73,422.33 148.00,419.43
         159.29,416.24 164.67,417.39 168.00,416.43
         176.37,414.02 174.42,406.60 185.00,406.04
         190.33,405.76 193.53,406.64 198.00,409.60
         201.28,411.76 205.49,416.34 209.61,413.24
         212.39,411.15 213.32,406.23 214.00,403.00
         214.00,403.00 218.25,380.00 218.25,380.00
         218.25,380.00 230.08,310.00 230.08,310.00
         231.39,302.02 235.17,283.01 233.47,276.00
         231.91,269.58 227.23,267.18 226.04,263.00
         224.76,258.52 229.04,256.11 222.79,249.04
         218.72,244.44 208.83,239.58 206.89,234.91
         205.44,231.40 206.00,215.76 206.00,211.00
         212.56,209.75 218.02,204.80 225.00,204.91
         230.07,204.98 232.65,211.47 238.94,207.26
         246.19,202.42 243.67,189.39 236.91,185.28
         231.70,182.11 220.27,183.00 214.00,183.00
         214.00,183.00 215.00,161.00 215.00,161.00
         215.00,161.00 226.00,160.18 226.00,160.18
         226.00,160.18 243.00,162.00 243.00,162.00
         243.00,162.00 259.00,161.04 259.00,161.04
         263.39,160.85 274.38,161.24 277.68,158.40
         280.20,156.24 279.37,152.87 280.00,150.00
         280.97,151.95 281.97,154.23 283.41,155.86
         291.56,165.03 297.94,153.70 302.67,148.02
         304.93,145.29 307.85,141.96 311.54,144.62
         314.61,146.83 320.76,157.22 321.89,161.00
         322.13,163.34 321.99,167.48 321.89,170.00
         321.89,170.00 321.89,174.00 321.89,174.00
         322.93,184.00 329.69,177.76 336.00,181.52
         343.95,186.25 352.91,197.53 363.00,196.45
         370.46,195.65 377.16,190.05 384.00,187.00
         384.04,190.97 384.33,198.37 390.01,198.37
         394.08,198.37 395.68,193.80 397.80,191.22
         400.29,188.18 402.22,188.35 404.66,186.31
         404.66,186.31 410.26,179.61 410.26,179.61
         416.80,173.70 420.55,175.03 426.00,172.31
         426.00,172.31 433.91,167.37 433.91,167.37
         433.91,167.37 439.08,166.55 439.08,166.55
         442.34,165.30 450.14,159.09 451.69,155.99
         453.27,152.81 453.00,148.49 453.00,145.00
         463.09,144.44 463.83,140.41 470.00,137.31
         475.68,134.46 476.92,137.98 481.00,131.00
         481.00,131.00 483.00,131.00 483.00,131.00 Z" />

     <rect class="tooltip_bg" id="tooltip_bg" x="0" y="0" rx="4" ry="4"width="52" height="16" visibility="hidden"></rect>
     <text class="tooltip" id="tooltip" x="0" y="0" >Tooltip</text>

    </svg>
</div>

javascript

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 + 5);
    tooltip_bg.setAttributeNS(null, "x", evt.clientX + 8);
    tooltip_bg.setAttributeNS(null, "y", evt.clientY - 20);
    tooltip_bg.setAttributeNS(null, "visibility", "visibile");
}

function HideTooltip() {
    tooltip.setAttributeNS(null, "visibility", "hidden");
    tooltip_bg.setAttributeNS(null, "visibility", "hidden");
}

CSS

.caption{
    font-size: 60px;
    font-family: Georgia, serif;
    }

.tooltip{
    font-size: 50px;
    display:block;
    white-space: pre-line;
    }

.tooltip_bg{
    fill:white;
    stroke: black; 
    height:300px;
    width:700px;
    stroke-width: 2;
    opacity: 0.85;
    }

Answer 1

Good morning,

You can put a \n (to start a new line) at the part you want to skip the line.

Example:

onmousemove="ShowTooltip(evt,'Manaus\n(92)3231-1424')"