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

Ответ 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;
}