ツールチップは、主にグラフィカル要素に関する、小さくインタラクティブなテキストヒントです。アイコンを操作に使用する場合は、ツールチップを使用して機能を明確にすることができます。

Tooltippedクラスをエレメントに追加し、data-tooltipにtop、bottom、left、rightのいずれかを追加して、位置を制御します。

  <!-- data-position can be : bottom, top, left, or right -->
  <!-- data-tooltip defines the tooltip text -->
  <a class="btn tooltipped" data-position="bottom" data-tooltip="I am a tooltip">Hover me!</a>
        

初期化

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.tooltipped');
    var instances = M.Tooltip.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.tooltipped').tooltip();
  });
        

オプション

名前	タイプ	デフォルト	説明
exitDelay	数値	0	ツールチップが消えるまでの遅延時間。
enterDelay	数値	200	ツールチップが表示されるまでの遅延時間。
html	文字列	null	通常のテキストまたはHTML文字列を使用できます。
margin	数値	5	ツールチップがtransitionMovementを除いてアクティベーターから離れる距離を設定します。
inDuration	数値	300	トランジションの開始時間を設定します。
outDuration	数値	250	トランジションの終了時間を設定します。
position	文字列	'bottom'	ツールチップの方向を設定します。'top'、'right'、'bottom'、'left'。
transitionMovement	数値	10	ツールチップがトランジション中に移動するピクセル単位の数。

メソッド

jQueryが依存関係ではなくなったため、メソッドはすべてプラグインインスタンスに対して呼び出されます。次のようにプラグインインスタンスを取得できます

  var instance = M.Tooltip.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.tooltip').tooltip('methodName');
    $('.tooltip').tooltip('methodName', paramName);
  */
          

.open();

ツールチップを表示します。

instance.open();
        

.close();

ツールチップを非表示にします。

instance.close();
        

.destroy();

プラグインインスタンスを破棄し、削除します

instance.destroy();
        

プロパティ

名前	タイプ	説明
el	エレメント	プラグインが初期化されたDOMエレメント。
options	オブジェクト	インスタンスが初期化されたオプション。
isOpen	真偽値	ツールチップが開いている場合。
isHovered	真偽値	ツールチップがホバーされている場合。