Видимость подсказки с jQuery

Question

Я пытаюсь создать всплывающую подсказку, и когда она наведена, используя jQuery.

Я хочу, чтобы подсказка появлялась, если пользователь наводит курсор на триггер, но также оставалась видимой, если курсор появляется над всплывающей подсказкой после его появления.

$('#icon').hover(
  function() {
    $('#tooltip').fadeIn();
  },
  function() {
    $('#tooltip').fadeOut();
  }
)

body {
  text-align: center;
}

#credit {
  position: relative;
  display: inline-block;
  margin-top: 25px;
}

#tooltip {
  position: absolute;
  width: 120px;
  background-color: yellow;
  padding: 10px;
  top: 100%;
  left: 50%;
  margin-left: -65px;
  margin-top: 5px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="credit">Hover me–><svg id="icon" width="15" height="15">
  <rect width="15" height="15" fill="blue"/>
</svg>
  <div id="tooltip"><a href="">Website link #1</a><br></div>
</div>

В данный момент подсказка исчезает, если курсор не находится над триггером. Кто-нибудь знает как это решить?