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;
}