alt и название не отображается в качестве подсказки для SVG-пути

У меня есть несколько путей 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>

У меня есть как заголовок, так и alt для каждого пути. Когда я наводил указатель мыши на пути в Firefox, я получаю небольшую подсказку с именем страны. Но когда я делаю это в IE или Chrome, ничего не происходит. Кто-нибудь знает, почему, пожалуйста?

Ответ 1

По-видимому, правильный способ сделать это в Chrome - добавить элемент <title> в качестве дочернего элемента. Подробнее см. Здесь.

Поэтому он должен выглядеть так:

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

Вот живой пример

Ответ 2

простая душа:

Ваше решение здесь:

один раз (практический пример https://codepen.io/brianplaza/pen/DfKsx

в html: (этот пример отлично работает) Пожалуйста, Thumbs Up, если он работает для вас

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