###実現したいこと
ボタンへのホバーに対応させてツールチップの表示切替を実装したいです。
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の場合
10回に1回くらい、ホバーしてもツールチップが表示されません。
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/13 02:06