关键词：
【中文标题】鼠标悬停时的SVG工具提示？【英文标题】：SVG tooltip on mouse hover? 【发布时间】：2015-05-11 05:43:09 【问题描述】：所以我有一个带有标记位置和多边形的 SVG 地图。使用 CSS，这些区域比地图的其余部分更亮，并且在悬停时它们的颜色不同。到目前为止，根本没有 JS 代码。
现在我想在鼠标悬停在某个区域上时创建一个带有文本（工具提示？）的悬停窗口，并且我希望该窗口显示为悬停在地图的正确区域上。
最简单的方法是什么？ 这是 SVG 地图：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 " 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" />
<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" />
<rect id="Falme" x="385.5" y="623.5" fill="none" />
<rect id="Tanchico" x="429.5" y="761" fill="none" />
<rect id="Amador" x="664" y="859.5" fill="none" />
<rect id="EbouDar" x="771.5" y="996" fill="none" />
<rect id="Jehannah" x="721.5" y="727" fill="none" />
<rect id="Lugard" x="968.5" y="772.5" fill="none" />
<rect id="Illiancity" x="1020" y="1031" fill="none" />
<rect id="Tearcity" x="1209.5" y="922.5" fill="none" />
<rect id="Mayene" x="1446.5" y="1007.5" fill="none" />
<rect id="FarMadding" x="1119" y="801.5" fill="none" />
<rect id="Caemlyn" x="1098" y="678" fill="none" />
<rect id="Cairhiencity" x="1252" y="546" fill="none" />
<rect id="TarValon" x="1177" y="445" fill="none" />
<rect id="Maradon" x="871" y="253.5" fill="none" />
<rect id="Chachin" x="1060" y="260" fill="none" />
<rect id="SholArbela" x="1197" y="260" fill="none" />
<rect id="FalMoran" x="1338.5" y="267.5" fill="none" />
</g>
</g>
</svg>
【问题讨论】：
好书！我现在正在读那个系列：P @Mottie 这是真的，但它并没有真正回答我的问题：P 我在下面的答案中添加了一条评论，希望能回答您的问题；基本上你不能用纯 css 添加样式工具提示。 【参考方案1】：创建一个标题元素，它是每个多边形的子元素，例如
<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>
如果你想要回车，你可以写成
<title>line 1
line 2
line 3
</title>
【讨论】：
那很好，但是我的文字比一个小标题要长一点。我将和
放在标题标签内，但它只是将整个文本显示在一行中，而不是将它们放在不同的行和样式中。
换句话说，我如何设置它的样式？我通过我的 CSS 页面放置了样式命令，但没有成功。 你不能使用 css 来设置它的样式；我什至尝试使用伪元素，但 won't work either。但您可以使用工具提示插件 - 请参阅 this answer。 @Mottie 这只是一个很棒的插件！我喜欢它！非常感谢！ （也是我发现的第一个实际工作并且非常容易设置的插件！）为 svg 中的行添加悬停工具提示
...我已将它作为“标题”包含在下面的代码中，但是当我将鼠标悬停在任一行上时，什么都没有发生。由于它们交叉，我并不特别关心当你将鼠标悬停在交叉路口时它会说什么。<!DOCTYPEhtml><htmllang="en"& 查看详情
Chromium SVG 悬停 <title> 工具提示怪异
...间】：2012-09-2711:22:06【问题描述】：在许多浏览器中，将鼠标指针悬停在具有嵌套<title>的SVG对象上，标题文本将显示为工具提示。如果相邻对象具有相同的标题，我发现Chrome中会发生一些奇怪的事情：当您将鼠标从 查看详情
Django 模板中包含的 Pygal svg 图表的工具提示问题
...clude\'categories_chart.svg\'%但是，当发出请求并显示页面时，鼠标悬停时的工具提示信息不完整-它仅显示项目的值而不 查看详情
SVG 矩形在鼠标悬停时显示 HTML 标题
】SVG矩形在鼠标悬停时显示HTML标题【英文标题】：SVGRectangledisplayHTMLtitleonmouseover【发布时间】：2016-03-2823:23:07【问题描述】：我尝试在鼠标悬停矩形时显示工具提示。我的尝试是使用<g>并为其设置title并将title设置为&a... 查看详情
悬停时的 SVG 圆形动画不起作用
...'twork【发布时间】：2021-01-1212:56:35【问题描述】：当您将鼠标悬停在导航菜单按钮上时，Atm我正在尝试重新创建SVG圆形动画，如本网站所示：https://5scontent.com/。在我的网站上，圆圈会在刷新时出现，然后消失。*margin:0;padding:0;fon... 查看详情
下拉combobox时的工具提示
...数字。这个组合下拉了每个代表某些东西的数字列表。当鼠标悬停在组合框上时，我希望在工具提示中显示这些内容。到现在为止一切都很好。我现在想要的是当鼠标滑过dopdown组合列表时看到工具提示。我怎样才能做到这一点... 查看详情
如何为 SVG 添加工具提示？ [复制]
...te]【发布时间】：2017-12-2302:59:17【问题描述】：当我们将鼠标悬停在圆圈上时，我的老师要求我在SVG圆圈上显示一个工具提示，其中包含一些链接和一些信息。他们给了我使用jQueryUI的提示。但是我已经搜索了很多关于这种工具... 查看详情
鼠标悬停效果工具提示
】鼠标悬停效果工具提示【英文标题】：hovereffecttooltipfollowingmouse【发布时间】：2022-01-0618:29:04【问题描述】：我对css没有什么问题，我无法正常使用转换。如果工具提示有更多文本，那么鼠标和工具提示之间的空间就会很大。... 查看详情
将鼠标悬停在工具提示区域上的工具提示指令
】将鼠标悬停在工具提示区域上的工具提示指令【英文标题】：TooltipDirectivewithmouseoverontooltiparea【发布时间】：2018-12-0805:58:14【问题描述】：我的要求是当用户将鼠标悬停在图标上时，应该出现工具提示，并且用户可以点击工具... 查看详情
将工具提示添加到 SVG rect 标签
...我创建了带有多个<rect>标记的SVG地图，我想在鼠标悬停时显示工具提示。使用title属性很好，但是有没有办法使用CSS/Javascript/jQuery重新设置它 查看详情
TextBox 字符串作为悬停时的工具提示
】TextBox字符串作为悬停时的工具提示【英文标题】：TextBoxstringastooltiponhover【发布时间】：2016-11-0916:38:37【问题描述】：我正在构建一个应用程序，我有一个TextBox控件，其中填充了一个值。在某些情况下控件太小，我没有空间... 查看详情
鼠标悬停在 QGraphicsPixmapItem 上后 Qt 显示工具提示
】鼠标悬停在QGraphicsPixmapItem上后Qt显示工具提示【英文标题】：QtDisplaytooltipaftermousehoveronQGraphicsPixmapItem【发布时间】：2014-05-1019:04:47【问题描述】：我正在使用QGraphicView来显示包含QGraphicsPixmapItems的游戏地图。我需要在鼠标悬停... 查看详情
悬停时的 SVG 不进行过渡
】悬停时的SVG不进行过渡【英文标题】：SVGonhovernottakingTransition【发布时间】：2021-04-2210:25:54【问题描述】：我正在尝试为需要更改svg路径的SVG设置动画。当我在那个时候悬停svg时，路径发生了变化，但是悬停时的转换不起作用... 查看详情
谷歌地图 v3 标记鼠标悬停工具提示
】谷歌地图v3标记鼠标悬停工具提示【英文标题】：googlemapsv3markermouseovertooltip【发布时间】：2011-02-0919:33:36【问题描述】：当鼠标悬停在标记上时，我想放置一个用div自己制作的工具提示，但我不知道如何获取屏幕位置以将div放... 查看详情
根据行鼠标悬停的条件显示行工具提示
】根据行鼠标悬停的条件显示行工具提示【英文标题】：displayrowtooltiponcondtionbaseonrowmousehover【发布时间】：2013-07-1109:01:12【问题描述】：我在网格渲染事件中使用此代码在行鼠标悬停时显示tplgrid.tip=newExt.ToolTip(view:grid.getView(),tar... 查看详情
根据 SVG 元素顶部位置定位工具提示
...这个由300多个多边形组成的Raphael生成的SVG图形。我想在悬停多边形时显示工具提示。我希望工具提示位于悬停路径旁边。到目前为止，一切都很好...我可以使用.pageX和.pageY属性。现在，这 查看详情
将鼠标悬停在闪亮的 ggplot 上时的工具提示
】将鼠标悬停在闪亮的ggplot上时的工具提示【英文标题】：ToolTipwhenyoumouseoveraggplotonshiny【发布时间】：2015-03-1323:50:56【问题描述】：我正在构建一个闪亮的应用程序。我正在使用ggplot绘制图表。当我将鼠标悬停在图表上的点上... 查看详情
将鼠标悬停在标题列数据表上时显示工具提示
】将鼠标悬停在标题列数据表上时显示工具提示【英文标题】：ShowTooltipwhenmouseovertheheadercolumndataTable【发布时间】：2014-03-0910:46:08【问题描述】：当鼠标悬停在表头上时如何显示动态表p:dataTable表头的工具提示以显示表头列的整... 查看详情