alt 和 title 未显示为 svg 路径的工具提示

Question

我有一些 svg 路径：

<path class="country" id="BLR" title="Belarus" alt="Belarus" d="M948.0142678672362,369.7256153651123L956.0315144997886,372.7549948212553L955.6251153181965,376.68106491420883L956.6993702966163,377.46634055469417L958.4144244330968,381.52092337306806L959.8614899624631,381.6111705103533L961.4358247718692,383.8516898475525L959.6328069741484,385.0654037682009L957.3752698953709,384.53552051711677L958.4665656000917,390.0076939606045L955.9148066459876,390.24630230981074L954.0730841220384,394.2297858860991L953.163550030379,393.0762648682822L950.333965883297,393.353478804788L943.9500919704785,392.13801133565164L939.2092506948762,390.2052953894462L934.5569856401167,390.2170281135237L931.9231336584982,391.7484512915885L932.3814647774813,388.98495674038986L931.0289993180527,387.81385807072303L933.4265401596901,386.10558265025156L933.7995387046943,384.91739193713676L933.1171566924312,379.6478010722885L935.6115604269471,380.1186619031289L939.5640872868389,378.3386011842294L940.8357423463007,375.41130363641486L942.8397126276869,373.56246283729985L943.307715755223,371.87935555833474L946.3215777553021,371.35369709054953Z"></path>

我对每条路径都有 title 和 alt。当我将鼠标悬停在 Firefox 中的路径上时，我会看到带有国家名称的小工具提示。但是当我在 IE 或 Chrome 中这样做时，什么也没有发生。请问有人知道为什么吗？

Answer 1

显然，在 Chrome 中执行此操作的正确方法是添加一个 <title> 元素作为子元素。有关此问题的更多详细信息，请参阅here。

所以它应该是这样的：

<path>
    <title>Belarus</title>
</path>

这是live example

Answer 2

简单的灵魂：

您的解决方案在这里：

结帐一次（实际示例 https://codepen.io/brianplaza/pen/DfKsx

在 html 中：

<svg version="1.1" id="Layer_1" x="0px" y="0px" width="959px" 
height="593px" viewBox="none" preserveAspectRatio="xMidYMid meet" 
xml:space="preserve" >
<path id="HI" fill="#E0E0E0" stroke="#FFFFFF" stroke-width="0.75"
 d="M233.1,519.3l1.9-3............977.53.7l"/>
<path id="Alaska" class="enabled" fill="#21669E" stroke="#FFFFFF" 
 stroke-width="0.75" d="M158.1,453.7l-0........519.3l1"/>

</svg>

// this is important ... it will show tooltip
<div class="description"></div>
<script 
src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
 </script>

在js中

$description = $(".description");

  $('.enabled').hover(function() {
    
    $(this).attr("class", "enabled heyo");
    $description.addClass('active');
    $description.html($(this).attr('id'));
  }, function() {
    $description.removeClass('active');
  });

$(document).on('mousemove', function(e){
  
  $description.css({
    left:  e.pageX,
    top:   e.pageY - 70
  });
  
});

在css中

 .heyo:hover {
     fill: #CC2929;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.enabled {
  fill: #21669E;
  cursor: pointer;
}

.description {
  pointer-events: none;
  position: absolute;
  font-size: 18px;
  text-align: center;
  background: white;
  padding: 10px 15px;
  z-index: 5;
  height: 30px;
  line-height: 30px;
  margin: 0 auto;
  color: #21669e;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #eee;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  display: none;
}
.description.active {
  display: block;
}
.description:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0;
  height: 0;
  margin-left: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid white;
}