Edgeにおけるmouseover/mouseenterイベントについて

実現したいこと

Edgeにおける、mouseoverまたはmouseenterイベント(jQueryのhover()も可)でツールチップを表示させたいです。
Chrome/Safari/IEは、マウスカーソルをhoverさせた時、以下のコードで動作するのですが、Edgeだけ動作致しません。

何とかjQuery Coreまたはネイティブなjavascriptで制御することは可能でしょうか？
不可能という回答でも構いませんので、ご教授願います。

サンプルコード

html
1<body>
2<input type="checkbox" checked="checked"/><br/>
3<div class="target-area">
4  <input type="text" class="input-text" disabled="disabled" value="ツールチップで表示したい内容"/>
5  <textarea class="tooltip" disabled="disabled">ツールチップで表示する内容</textarea>
6</div>
7
8	
9<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
10crossorigin="anonymous"></script>
11
12<script>
13  const targetArea = $('.target-area');
14  targetArea.hide();
15
16  targetArea.hover(function(e){
17	targetArea.show();
18  }, function(e){
19	targetArea.hide();
20  });
21</script>
22</body>

CSS
1.target-area {
2  position: relative;
3  display: inline-block;
4}
5.input-text{
6  position: relative;
7}
8.tooltip {
9  position: absolute;
10  top:  0px;
11  left: 100px;
12  width:200px;
13  height:200px;
14}
15

環境

Edge

Microsoft Edge 44.18362.449.0
Microsoft EdgeHTML 18.18363

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScriptのaddEventListener()でマウスオーバーイベントを追加してみてはいかがですか？
https://techacademy.jp/magazine/20800

投稿2020/03/07 05:52

H40831

総合スコア973

kanetugu_70e

2020/03/07 06:13 編集

お恥ずかしながら、"jQueryまたはネイティブjavascript"と自分で条件を付けておいて、addEventListener()を試すのを忘れておりました。。。 addEventListener('mouseenter', ...)とすることで、無事目的を果たすことが出来ました。ご回答頂きありがとうございました!!

行動規範の内容に同意します