マテリアライズCSSツールチップをホバリングしたままにする

Question

私が現在取り組んでいるのは、SVG要素の一部にカーソルを置いたときに表示されるツールチップを呼び出すことです。マウスが外れても通常通り消えますが、ツールチップ自体の上に私たちは、ツールチップコンポーネントが付属しているマテリアライズCSSを使用しています。 私のコードのセグメントは以下の通りです。

<svg width="400" height="400"> 
    <rect x="190" y="255" width="70" height="25" class="fixture good tooltipped" id="ines" data-position="top" data-delay="50" data-tooltip="Carbonated Drinks<br><a href='#'>View More</a>"" data-html="true"/> 
</svg> 

あなたが見ることができるように、彼らはマウス場合は、ユーザーが実際にツールチップ上に「もっと見る」リンクをクリックすることができるように、私はこれをしたい理由があります。しかし、現在のところマウスにマウスを置いてもツールチップが消えます。

これは他のフレームワーク/ライブラリで行うことができますが、これまでマテリアライズCSSではこれを行うことができませんでした。

大規模なインターネット検索で何も表示されないため、これが可能かどうかは誰にも分かりません。

Answer 1

Materialize tooltip関係する各DOMノード用"mouseleave.tooltip"イベントハンドラを割り当てます。

このイベントは、DOM要素を離れるとすぐに起動され、225ミリ秒後に（詳細はsource codeを参照）、トゥイップが非表示になります。

また、ツールチップのスタイルはpointer-eventsで、noneと等しいです。マウスイベントが発生しないため、アンカーは決してクリックできません。すべてのこれらの手順可能性を克服するために

は次のとおりです。

• にはmouseleave.tooltipをトリガすることはできないので、jQueryのハンドラから前のオブジェクトを削除するjQueryのマウスアウトイベントオブジェクト
• を保存します。
• 各ツールチップ（クラス：material-tooltipを持つ）のjQuery hoverイベントを処理します：これは、マウスの位置をツールチップにテストするためにプロパティを保存するためです
• あなたの要素のmouseenterを設定します。 mouseleave上と同じように自動
• をデフォルトにイベントは、マウスがツールチップ上にあるかどうかをテストするために、タイムアウトに未満225ミリ秒に設定します。実行していない場合は、標準のjQueryは、mouseLeaveツールチップに
• mouseleave.tooltipイベントを実体前の点で同じ手順を実行します。

スニペット（jsfiddle）：

$(function() { 
 

 
    var x = jQuery._data(document.getElementById('ines'), "events")['mouseout'][0]; 
 
    delete jQuery._data(document.getElementById('ines'), "events")['mouseout']; 
 
    $('.material-tooltip').hover(function(e) { 
 
     $(this).attr('hover', 1); 
 
    }, function(e) { 
 
     $(this).attr('hover', 0); 
 
     x.handler.apply(document.getElementById('ines'), x); 
 
    }); 
 
    $('#ines').on('mouseenter', function(e) { 
 
     $('.material-tooltip:visible').css('pointer-events', 'auto'); 
 
    }).on('mouseleave', function(e) { 
 
     setTimeout(function() { 
 
      var val = $('.material-tooltip:visible').attr('hover'); 
 
      if (val == undefined || val == 0) { 
 
       x.handler.apply(document.getElementById('ines'), x); 
 
      } 
 
     }, 150); 
 
    }) 
 

 

 
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script> 
 

 

 
<svg width="400" height="400"> 
 
    <rect x="190" y="155" width="70" height="25" class="fixture good tooltipped" id="ines" data-position="top" 
 
      data-delay="50" data-tooltip="Carbonated Drinks<br><a href='#'>View More</a>" 
 
      data-html="true"/> 
 
</svg>