クリック可能なツールチップの作成

Question

Javascriptを使用してツールチップを作成しています。
リストからマウスを外すと、ツールチップが消えてしまいますが、ツールチップ内もクリック可能なように変更を行いたいです。
HTMLを変更せず、Javascriptの変更のみで対応が可能でしょうか？

<ul class="samplelist">
  <li class="samplelist_item" data-text="ツールチップ1"><span>文字列</span>サンプル5のメニュー1<span>文字列</span></li>
  <li class="samplelist_item" data-text="ツールチップ2"><span>文字列</span>サンプル5のメニュー2<span>文字列</span></li>
  <li class="samplelist_item" data-text="ツールチップ3"><span>文字列</span>サンプル5のメニュー3<span>文字列</span></li>
  <li class="samplelist_item" data-text="ツールチップ4"><span>文字列</span>サンプル5のメニュー4<span>文字列</span></li>
</ul>

.samplelist li {
  position: relative;
}

.samplelist li:hover {
  background: #deb3ba;
}

.sample5-tooltips {
  display: block;
  position: absolute;
  bottom: -2.8em;
  left: 0.3em;
  z-index: 9999;
  width: auto;
  height: auto;
  padding: 0.3em 0.5em;
  color: #FFFFFF;
  background: #c72439;
  border-radius: 0.5em;
}

.sample5-tooltips:after {
  width: 100%;
  content: "";
  display: block;
  position: absolute;
  left: 0.5em;
  top: -8px;
  border-top: 8px solid transparent;
  border-left: 8px solid #c72439;
}

var targets = document.getElementsByClassName("samplelist_item");
for (let i = 0; i < targets.length; i++) {
  targets[i].onmouseover = function () {
    var element = document.createElement("div");
    element.innerHTML = this.getAttribute('data-text');
    element.className = "sample5-tooltips";
    this.appendChild(element);
  }
  targets[i].onmouseout = function () {
    this.removeChild(this.childNodes.item(this.childNodes.length - 1)); 
  }
}

Answer 1

リストからマウスを外すと、ツールチップが消えてしまいますが、ツールチップ内もクリック可能なように変更を行いたいです。

リストからマウスを外したときに、ツールチップを数秒後に消すようにする。
マウスが元のリストかツールチップにホバーされた場合は消す処理をキャンセルする。

Answer 2

シンプルに考えると、ツールチップを消す条件を「マウスカーソルがリストアイテムの中でもツールチップの中でもないとき」にすればいいですが、リストアイテムとツールチップが接している部分が大きくない場合は、マウスカーソルの移動中に消す条件を満たしてしまうためうまくいきません。

• リストアイテムの中でもツールチップの中でもなくなった後、数100msぐらい遅らせてからツールチップを消すようにする。or
• ツールチップはリストアイテムと接するようにする。ツールチップの最上位の要素の中にもう1つ要素を入れて、ツールチップの見た目はそこで作る(ツールチップの背景の上部が透明になるようにする)

Answer 3

.sample5-tooltipsが下方向に相対位置をとっているので
.samplelist_itemにhoverしながら.sample5-tooltipsにマウスを乗せることはできません