alt et le titre n'apparaissant pas comme tooltip pour le chemin svg

J'ai quelques chemins 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>

J'ai à la fois le titre et alt pour chaque chemin. Quand je souris sur les chemins d'accès dans Firefox, j'obtiens la petite étiquette avec le nom du pays. Mais quand je fais ça dans IE ou Chrome, rien ne se passe. Personne ne sait pourquoi, s'il vous plaît?

source d'informationauteur LauraNMS

  1. 26

    Apparemment, la manière correcte de le faire en Chrome est d'ajouter un <title> élément comme un élément enfant. Voir ici pour plus de détails sur cette question.

    Donc, il devrait ressembler:

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

    Ici est un live exemple

  2. -1

    simple soultion :

    Votre solution est ici:

    checkout (Exemple pratique https://codepen.io/brianplaza/pen/DfKsx

    en html : (cet exemple fonctionne parfaitement) Veuillez Pouce vers le Haut si son travail pour vous 

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

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

});

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