CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
Nimrod Yanai
Nimrod Yanai

Reputation: 819

SVG tooltip on mouse hover?

So I have an SVG map with marked locations and polygons. Using CSS, the areas are brighter than the rest of the map and on hover they are colored differently. So far no JS code at all.

Now I want to create a hovering window with a text (Tooltip?) whenever the mouse is over an area, and I want that window to appear hovering over the correct area of the map.

What would be the simplest way to do this? Here is the SVG map: http://jsfiddle.net/4wx8v817/

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1600 1175" enable-background="new 0 0 1600 1175" xml:space="preserve">
            <g id="Layer_1">
            <g id="Map_2_">
            <g id="Map">
            <image overflow="visible" enable-background="new    " width="1600" height="1175" id="Map_1_" xlink:href="http://1.bp.blogspot.com/_SniTwfm5BwE/TD5ntu8-F8I/AAAAAAAACnY/LaZH__Hvn3M/s1600/Wheel+of+Time+Map+Final.jpg"></image>
            </g>
            </g>
            </g>                
            <g id="Layer_2">
                <polygon id="Andor" fill="none" points="1200.25,708.5 1161.25,722.25 1125,741.25 1109.5,750 1101.75,758.25 1090.5,762.5
                                                    1081.5,773.75 1066.75,781 1071.25,762.5 1071.25,738.75 1063,722.25 1034.75,711.75 1017.25,710.5 958,729 951.25,729 943,732.25
                                                    913.25,737.75 910.75,722.25 893.75,715 875.75,715 853.75,702 849.25,700.75 835.25,692.75 817,690.5 779.25,678.5 772.75,674
                                                    738.75,659.25 720,655.25 704,657.25 690,665.25 693.5,624.5 707.75,583.5 702.25,558.5 702.25,512.75 716,512.75 727.5,530.25
                                                    727.5,563.25 746,589.5 766,589.5 770.25,596.75 785.5,587.5 794,589.5 802.25,605.75 815.75,609 831.25,605.75 849.25,619.75
                                                    873.5,625.75 881,638 889.75,639.25 896,645.25 908.25,639.25 947.12,638 969.25,630.5 1001.75,630.5 1177,615.25   " />
            <polygon id="Cairhien" fill="none" points="1485.5,472 1448.83,566.67 1437.5,587.5 1389.17,597 1353.5,612.33 1310.17,640
                                                       1223.83,661.33 1204.5,661.33 1195.17,673.33 1177,593.67 1182.5,549.33 1198.5,509.67 1221.17,494 1267,472 1305.17,472
                                                       1448.83,458.33   " />
            <polygon id="Saldaea" fill="none" points="1011.5,232.02 1009.83,243.35 1006.83,247.35 987.5,286.68 985.17,303.68 971.83,308.35
                                                      954.17,327.68 915.17,345.02 803.5,422.68 782.5,447.35 733.17,412.35 724.5,396.35 711.83,395.02 657.83,354.68 682.83,337.68
                                                      693.5,295.02 714.5,292.35 728.83,297.68 735.5,303.68 755.17,301.02 752.83,289.68 763.17,285.02 757.83,274.68 763.17,267.02
                                                      771.83,267.02 769.5,260 791.33,253.5 785.5,245.35 785.5,242.02 797.17,237.68 797.17,233.02 810.17,232.02 812.5,227.85
                                                      826.83,227.85 829.83,221.02 882.5,216.35 888.5,221.02 902.17,221.02 902.17,216.35 912.17,218.35 927.83,218.35 931.83,211.68
                                                      943.83,211.68 946.17,221.02 954.17,223.68 971.33,218.35 974.17,223.68 968.5,232.02 971.83,234.02  " />
            <polygon id="Kandor" fill="none" points="1148.17,274.02 1155.17,315.02 1013.83,307.02 997.17,303.68 985.17,303.68 987.5,286.68
                                                     1006.83,247.35 1009.83,243.35 1011.5,232.02 1013.83,225.02 1030.5,221.02 1037.17,232.02 1055.83,230.35 1055.83,226.52
                                                     1060,230.35 1083,230.35 1077.83,225.02 1127.5,218.02 1137.5,225.02 1155.17,225.02  " />
            <polygon id="Arafel" fill="none" points="1313.83,252.35 1311.83,261.68 1299.5,267.5 1273.5,298.68 1229.83,325.68
                                                     1153.17,340.02 1155.17,315.02 1148.17,274.02 1155.17,225.02 1172.17,227.68 1175.5,231.18 1188.5,226.52 1192.5,232.02
                                                     1204.5,230.35 1208.5,221.52 1218.5,226.52 1246.83,226.52 1242.5,232.02 1253.17,234.68 1265.17,240.02 1275.5,238.02
                                                     1284.5,240.02 1305.67,238.02   " />
            <polygon id="Shienar" fill="none" points="1448.84,266.52 1451.17,294.35 1451.17,306.68 1437.5,306.68 1429.84,312.18
                                                      1409.84,309.43 1393.17,310.81 1341.84,334.35 1311.83,337.02 1276.84,340.02 1229.83,325.68 1273.5,298.68 1299.5,267.5
                                                      1311.83,261.68 1313.83,252.35 1312.83,250.59 1334.84,248.35 1366.84,243.02 1382.17,248.35 1404.17,245.68 1429.84,243.02
                                                      1448.84,248.35 1453.5,258.35  " />
            <polygon id="TarValon_1_" fill="none" points="1208.5,478.34 1197,478.34 1180.83,471.68 1171.83,459.68 1171.83,436.34
                                                          1177,431.01 1200,445 1206.5,456.5     " />
            <polygon id="Tear" fill="none" points="1444.5,1000.68 1436.83,1021.35 1427.17,1022.68 1420.17,1028.35 1410.17,1028.35
                                                   1401.83,1022.68 1393.5,1022.68 1383.83,1009.35 1380.83,995.01 1383.83,982.35 1383.83,969.68 1377.83,963.22 1356.83,961.1
                                                   1338.5,965.35 1332.83,952.01 1321.17,952.01 1309.17,941.01 1293.17,952.01 1293.17,955.35 1283.83,963.51 1256.5,963.51
                                                   1248.83,958.68 1170.67,968.35 1168.17,949.01 1173.17,930.35 1189.83,911.68 1222.83,892.01 1269.17,882.01 1332.83,882.01
                                                   1347.67,887.01 1359.17,889.35 1393.5,909.01 1397.67,925.35 1410.17,941.01 1417.67,945.5 1428.83,958.68 1420.17,965.35
                                                   1420.17,976.01 1415.17,982.35 1415.17,986.35 1427.17,990.01 1427.17,995.01   " />
            <polygon id="Illian" fill="none" points="1137.17,979.35 1110.17,988.35 1094.17,986.68 1079.83,996.35 1071.5,1010.35
                                                     1055.5,1010.35 1049.17,1012.68 1058.83,1031 1046.5,1055.35 1036.33,1062.35 1011.5,1057.35 994.17,1028.35 1000.5,991.52
                                                     997.33,979.35 998.92,972.02 981.83,957.35 969.83,952.02 955.5,952.02 945.12,945.5 950.31,934 950.31,925.02 968.5,872.35
                                                     975.83,866.35 975.83,859.35 990.38,859.35 1021.5,850.68 1051.17,877.02 1082.5,903.35 1087.17,903.35 1110.17,935.35     " />
            <polygon id="Altara" fill="none" points="973.6,858.43 972.54,869.05 966.8,874.3 950.31,925.02 942.83,945.5 901.83,945.5
                                                     895.83,941.81 888.12,948.92 888.12,968.01 901.83,980.67 887.09,996 846.5,1000.01 829.83,1011.01 809.83,1002.67 796.5,1021.34
                                                     778.83,1024.01 774.17,1015.01 765.17,1009.34 769.67,992.01 769.67,988.34 778.83,976.67 807.83,958.47 813.83,934 824.5,905.01
                                                     819.17,863.74 848.5,829.34 846.5,792.01 829.94,775.67 807.5,765.33 789.8,744.1 765.83,702 742.39,684.65 720,655.25
                                                     742.39,660.83 779.25,678.5 819.48,690.81 840.41,695.13 853.75,702 870.88,712.12 883.59,715 895.83,715 910.75,722.25
                                                     913.25,737.75 959.46,728.54 942.83,770.67 939.83,805.34    " />
            <polygon id="Amadicia" fill="none" points="824.5,905.01 813.83,934 807.83,958.47 756.5,915.01 696.17,912.34 684,907.67
                                                       634.17,901.67 623.5,894.67 619.5,884.34 628.83,873.67 640.17,864.01 668.83,853.34 691.5,795.5 723.5,791.34 735.17,784
                                                       751.17,784 771.5,803.67 796.5,820.34 802.5,843.01 814.17,859.5 819.17,863.74     " />
            <polygon id="Tarabon" fill="none" points="691.5,795.5 668.83,853.34 640.17,864.01 619.5,884.34 620.71,887.46 605.17,887.46
                                                      583.5,881 536.5,858.67 465.67,821.34 439.42,813.34 437.83,803 441,795.5 448.83,792.67 454.17,786 452.5,786 448.83,781
                                                      443.17,786 432.5,784 427.5,769.67 443.17,752.67 444.83,745.33 458.5,724.34 461.5,705.34 469.83,698.34 484.5,681.34
                                                      550.5,686.34 589.83,688 605.17,689.67 625.17,693.67 633.83,698.34 648.5,719 652.17,720.67 677.5,740.67 690,750    " />
            <polygon id="AradDoman" fill="none" points="697.17,512.75 690,555.01 666.17,565.35 629.5,549.35 599,545.01 572.17,533.88
                                                        546.17,535.01 505.83,541.35 480.5,539.35 489.5,530.68 486.17,473 474.83,473 465.5,478.01 449.83,476.35 445.83,464.35
                                                        449.83,451.25 461.5,447.35 474.83,437.01 478.83,437.01 493.5,429.35 505.83,420.68 513.5,423.01 535.17,407.68 557.17,429.35
                                                        592.17,450 605.83,452.51 617.83,455.01 637.83,455.01 646.5,450 666.17,447.35 685.83,458.01 682.17,474.35    " />
            <rect id="AielWaste" x="1511.5" y="237" fill="none" width="32" height="708.5" />
            <polygon id="Termalking" fill="none" points="296.25,1073.5 296.25,1081.88 275.5,1084 271.5,1081.62 265.25,1084 224,1079.75
                                                         216.5,1085.75 212.25,1085.75 203,1091.5 196.25,1091.5 179.75,1097.5 173.75,1093.25 171,1093.25 166.75,1085.75 159.5,1085.75
                                                         153,1077.5 146.75,1077.5 128,1063 130.5,1055.12 128,1047.44 133.12,1042 130.5,1033.75 135.75,1026 137.38,1019 145.5,1011.5
                                                         145.5,1003.88 148.31,999.75 146.75,991 149.88,989 158.25,989 173.75,1005.25 179.75,1003.88 188,1009.5 192.25,1008
                                                         212.25,999.75 220.25,1001 220.25,1009.5 214.38,1016.75 199.62,1021.25 192.25,1033.75 195,1037.38 193.5,1045.12 189.5,1049.75
                                                         195,1060.5 203,1060.5 214.38,1067.25 233,1052.5 226.75,1042 220.25,1040.5 222.75,1027 224,1027 244.62,1028 250.5,1026
                                                         253.5,1030 268.38,1034.25 281.75,1030 287.25,1034.25 285.88,1040.5 290.75,1049.75 283.75,1058 283.75,1063 290.75,1067.25   " />
            </g>
                <g id="Capitals_1_">
                    <g id="Capitals">
                    <rect id="BandarEban" x="454" y="450" fill="none" width="23" height="23" />
                    <rect id="Falme" x="385.5" y="623.5" fill="none" width="23" height="21" />
                    <rect id="Tanchico" x="429.5" y="761" fill="none" width="23" height="23" />
                    <rect id="Amador" x="664" y="859.5" fill="none" width="20" height="23" />
                    <rect id="EbouDar" x="771.5" y="996" fill="none" width="23" height="23" />
                    <rect id="Jehannah" x="721.5" y="727" fill="none" width="23" height="23" />
                    <rect id="Lugard" x="968.5" y="772.5" fill="none" width="23" height="23" />
                    <rect id="Illiancity" x="1020" y="1031" fill="none" width="23" height="23" />
                    <rect id="Tearcity" x="1209.5" y="922.5" fill="none" width="23" height="23" />
                    <rect id="Mayene" x="1446.5" y="1007.5" fill="none" width="23" height="23" />
                    <rect id="FarMadding" x="1119" y="801.5" fill="none" width="23" height="23" />
                    <rect id="Caemlyn" x="1098" y="678" fill="none" width="23" height="23" />
                    <rect id="Cairhiencity" x="1252" y="546" fill="none" width="23" height="23" />
                    <rect id="TarValon" x="1177" y="445" fill="none" width="23" height="23" />
                    <rect id="Maradon" x="871" y="253.5" fill="none" width="23" height="23" />
                    <rect id="Chachin" x="1060" y="260" fill="none" width="23" height="23" />
                    <rect id="SholArbela" x="1197" y="260" fill="none" width="23" height="23" />
                    <rect id="FalMoran" x="1338.5" y="267.5" fill="none" width="20" height="20.5" />
                    </g>
                </g>
            </svg>

Upvotes: 3

Views: 2120

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

Create a title element that is the child of each polygon e.g.

                <polygon id="Andor" fill="none" points="1200.25,708.5 1161.25,722.25 1125,741.25 1109.5,750 1101.75,758.25 1090.5,762.5
                                                    1081.5,773.75 1066.75,781 1071.25,762.5 1071.25,738.75 1063,722.25 1034.75,711.75 1017.25,710.5 958,729 951.25,729 943,732.25
                                                    913.25,737.75 910.75,722.25 893.75,715 875.75,715 853.75,702 849.25,700.75 835.25,692.75 817,690.5 779.25,678.5 772.75,674
                                                    738.75,659.25 720,655.25 704,657.25 690,665.25 693.5,624.5 707.75,583.5 702.25,558.5 702.25,512.75 716,512.75 727.5,530.25
                                                    727.5,563.25 746,589.5 766,589.5 770.25,596.75 785.5,587.5 794,589.5 802.25,605.75 815.75,609 831.25,605.75 849.25,619.75
                                                    873.5,625.75 881,638 889.75,639.25 896,645.25 908.25,639.25 947.12,638 969.25,630.5 1001.75,630.5 1177,615.25   ">
                                                        <title>Andor</title></polygon>

If you want carriage returns you can write them as 

<title>line 1
line 2
line 3
</title>

Upvotes: 3

Related Questions