Удалить класс в SVG mouseout

JSFiddle

Пытаюсь удалить окно всплывающей подсказки из прямоугольника SVG при наведении, когда для значения установлено значение none (наведите указатель мыши на нижний синий прямоугольник, чтобы увидеть это). Я пробовал getElementsByClassName(), и он все еще показывает серое поле всплывающей подсказки. Я был бы признателен, если бы он был удален на основе класса, а не идентификатора, поскольку у меня есть около 130 прямоугольников, которым потребуется назначить уникальные идентификаторы + добавить около 130 строк для JS.

Изменение .hover на mouseenter или mouseover = без эффекта Изменение mouseleave на mouseout = без эффекта.

HTML с SVG

<div id="info-box"></div>
 
<svg width="959px" height="593px">

<rect x="50" y="30" width="100" height="50" data-info="<div><b>Bla:</b> Bla</div><div><b>bla:</b> NMore blabla</div>"></rect>

<rect x="60" y="130" width="100" height="50" data-info="<div><img src='https://upload.wikimedia.org/wikipedia/commons/4/42/Cute-Ball-Go-icon.png' width='30px'></div><div><b>Stasdf</b> wsdfsdfer</div><div><b>Csdfsdfage:</b> Nosdfsdf</div>"></rect>

<rect x="70" y="230" width="100" height="50" data-info></rect>

</svg>

CSS

rect{
  fill:blue;
}


#info-box {
  display:none;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  padding: 15px;
  color: #ffffff;
  background-color:#212121;
  opacity: 0.85;
  font-family: arial;
}

JS (с jquery)

  $("rect").hover(function(e) {
  $("#info-box").css("display", "block");
  $("#info-box").html($(this).data("info"));
});

$("rect").mouseleave(function(e) {
  $("#info-box").css("display", "none");
});

$(document)
  .mousemove(function(e) {
    $("#info-box").css("top", e.pageY - $("#info-box").height() - 35);
    $("#info-box").css("left", e.pageX - $("#info-box").width() / 2);
});