alt and title not showing up as tooltip for svg path

simple soultion :

Your solution is here:

checkout once (practical Example

in 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"
<path id="Alaska" class="enabled" fill="#21669E" stroke="#FFFFFF" 
 stroke-width="0.75" d="M158.1,453.7l-0........519.3l1"/>


// this is important ... it will show tooltip
<div class="description"></div>

in js

$description = $(".description");

  $('.enabled').hover(function() {
    $(this).attr("class", "enabled heyo");
  }, function() {

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

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

Apparently, the correct way to do this in Chrome is to add a <title> element as a child element. See here for more details about this issue.

So it should look like:


Here is a live example