jQueryでのホバー検知が、１０回に１回ほど機能しなくなる

###実現したいこと
ボタンへのホバーに対応させてツールチップの表示切替を実装したいです。

html
1<head>
2<link rel='stylesheet' id='fontawesome.css-css'  href='https://use.fontawesome.com/releases/v5.7.2/css/all.css?ver=5.1.1' type='text/css' media='all' />
3</head>
4
5<style>
6.tooltip {
7  position: relative;
8}
9.tooltip_hover {
10  position: absolute;
11  display: inline-block;
12  padding: 7px 10px;
13  border-radius: 3px;
14  text-align: left;
15  left: 0;
16}
17.tooltip_hover::before {
18  content: "";
19  position: absolute;
20  top: -25px;
21  left: 10px;
22  border: 15px solid transparent;
23}
24.icon::before {
25  font-family: "Font Awesome 5 Free";
26  font-weight: bold;	
27  content: '\f059';
28}
29</style>
30
31<body>
32  <div>
33    <button type="button" class="tooltip" data-tooltip="ホバー中">
34    <span class="icon"></span>
35    </button>
36  </div>
37</body>

###発生している問題
Firefoxの場合
１０回に１回くらい、ホバーしてもツールチップが表示されません。

Chromeの場合
ホバーするとツールチップがﾁｶﾁｶﾁｶﾁｶとなります。

###試したこと
まず試したのがこの書き方で、上記問題が発生しました。

jquery
1$('.tooltip').hover(
2	function () { 
3		const tooltip = $(this).attr('data-tooltip');
4		const top = parseInt($(this).outerHeight())+20;
5		$(this).parent().append('<span class="tooltip_hover" style="top:'+top+'px">'+tooltip+'</span>');
6	}, function () {
7		$(this).parent().find('.tooltip_hover').remove();
8	}
9);	
10

続いてこのように書いてみたのですが変わらずです。

jquery
1$(document).on('mouseover','.tooltip', function(){
2	const tooltip = $(this).attr('data-tooltip');
3	const top = parseInt($(this).outerHeight())+20;
4	$(this).parent().append('<span class="tooltip_hover" style="top:'+top+'px">'+tooltip+'</span>');	
5});
6$(document).on('mouseout','.tooltip', function(){
7	$(this).parent().find('.tooltip_hover').remove();
8});
9

どうぞお試しの上、解決策がわかりましたら教えていただけますと幸いです。
宜しくお願い致します。
https://jsfiddle.net/1r094ysa/

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

回答2件

ベストアンサー

原因

問題の現象は、質問文のコードが以下のような動作を高速で繰り返しているために発生します。

.tooltip にホバーすると、その下に .tooltip_hover が挿入される。
.tooltip_hover の擬似要素に設定した border が、 .tooltip の下部に重なる。
マウスカーソルが .tooltip にホバーしていないことになり、 .tooltip_hover が削除される。

上記のことからわかるように、この問題の原因は、要素が表示される条件が、要素が表示されたときに満たされなくなってしまうことです。

解決策

この問題の解決策として、以下の 2 つが考えられます。

1. `top` プロパティの値を変更する

この問題は、 top プロパティに負の値を設定することにより、ボタンに擬似要素が重なることで発生しています。そのため、 top プロパティの値を、ボタンと擬似要素が重ならない位置に指定すれば解決します(動作確認用リンク)。

HTML
1<link rel='stylesheet' id='fontawesome.css-css' href='https://use.fontawesome.com/releases/v5.7.2/css/all.css?ver=5.1.1' type='text/css' media='all' />
2
3<div>
4  <button type="button" class="tooltip" data-tooltip="ホバー中">
5    <span class="icon"></span>    
6  </button>
7</div>

CSS
1.tooltip {
2  position: relative;
3}
4
5.tooltip_hover {
6  position: absolute;
7  display: inline-block;
8  padding: 7px 10px;
9  border-radius: 3px;
10  text-align: left;
11  left: 0;
12}
13
14.tooltip_hover::before {
15  content: "";
16  position: absolute;
17  top: 0; /* 変更 */
18  left: 10px;
19  border: 15px solid transparent;
20}
21
22.icon::before {
23  font-family: "Font Awesome 5 Free";
24  font-weight: bold;
25  content: "\f059";
26}

jQuery
1$(".tooltip").hover(
2  function() {
3    const tooltip = $(this).attr("data-tooltip");
4    const top = parseInt($(this).outerHeight()) + 20;
5    $(this)
6      .parent()
7      .append(
8        '<span class="tooltip_hover" style="top:' +
9          top +
10          'px">' +
11          tooltip +
12          "</span>"
13      );
14  },
15  function() {
16    $(this)
17      .parent()
18      .find(".tooltip_hover")
19      .remove();
20  }
21);

2. `z-index` プロパティを使う

もし top プロパティの値を変更出来ない場合は、 z-index プロパティを用いて、 .tooltip_hover をボタンの下に重ねることで今回の現象が改善されます(動作確認用リンク)。

HTML
1<link rel='stylesheet' id='fontawesome.css-css' href='https://use.fontawesome.com/releases/v5.7.2/css/all.css?ver=5.1.1' type='text/css' media='all' />
2
3<div>
4  <button type="button" class="tooltip" data-tooltip="ホバー中">
5    <span class="icon"></span>
6  </button>
7</div>

CSS
1.tooltip {
2  position: relative;
3}
4
5.tooltip_hover {
6  position: absolute;
7  display: inline-block;
8  padding: 7px 10px;
9  border-radius: 3px;
10  text-align: left;
11  left: 0;
12}
13
14.tooltip_hover::before {
15  content: "";
16  position: absolute;
17  top: -25px;
18  left: 10px;
19  border: 15px solid transparent;
20  z-index: -1; /* 追加 */
21}
22
23.icon::before {
24  font-family: "Font Awesome 5 Free";
25  font-weight: bold;
26  content: "\f059";
27}

jQuery
1$(".tooltip").hover(
2  function() {
3    const tooltip = $(this).attr("data-tooltip");
4    const top = parseInt($(this).outerHeight()) + 20;
5    $(this)
6      .parent()
7      .append(
8        '<span class="tooltip_hover" style="top:' +
9          top +
10          'px">' +
11          tooltip +
12          "</span>"
13      );
14  },
15  function() {
16    $(this)
17      .parent()
18      .find(".tooltip_hover")
19      .remove();
20  }
21);

投稿2019/05/11 06:18

編集2019/05/12 05:36

s8_chu

総合スコア14731

pariparipotato

2019/05/13 02:06

とてもわかりやすく、そして解決策は具体性が高く、勉強になりました。どうもありがとうございます。やっと前に進めそうです。

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

見た感じ、ボタン内が幅も高さも何もない状態だからかなと。
発火の範囲が狭いため（多分）mouseover後、即mouseoutしている感じですね。

例えばボタンの文言を入れてみたり下記のように.iconに幅をあたえてあげるとチカチカなりません（背景は問題切り分けのために追加。Firefoxは未確認）

css
1.tooltip span.icon{
2  display:inline-block;
3  width:50px;
4  height:50px;
5  background-color:#ccc;
6}

このあたり、ヒントにして色々やってみてください。

投稿2019/05/10 07:54

m.ts10806

総合スコア80850

pariparipotato

2019/05/10 08:25 編集

んー、Chromeでもこっちだとﾁｶﾁｶﾁｶﾁｶするのはなんでだと思いますか？ https://jsfiddle.net/mjL2zarg/ アイコンのちょい下あたり、ホバーしてみてください。こっちは仰る「ボタン内の幅と高さ」を50から30にしたたけなので、たぶん根本的な原因はそこではなさそうです。まぁヒントってことで、ありがとうございます。

m.ts10806

2019/05/10 08:33

場所によりますね。あまりしっかり確認してなかったところ申し訳なかったのですが、 50pxにしても左下のエリアはなります。場所によってはmouseoutが発火せずにmouseoverが多重起動して文字が重なるようなときもありますね。グローバルでフラグもっておいて切り替えるなど工夫が必要かもしれません。

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

あなたの回答