menuMDUIDocs
color_lens
Material Design 3 と Web Components をベースにした新しい mdui 2 がリリースされました。mdui 2 ドキュメントはこちら。

ツールチップ

ツールチップは通常、アイコンに補足説明を付けるために使われます。内容は通常プレーンテキストで、画像や書式付きテキストは含みません。

使用方法

  1. カスタム属性での呼び出し
  2. JavaScript での呼び出し

関連情報

Material Design デザインガイドライン：コンポーネント - ツールチップ

使用方法

カスタム属性での呼び出し

この方法では JavaScript コードを記述する必要はありません。要素に mdui-tooltip="オプション" 属性を追加するだけで、このプラグインを有効にできます。

codeplay_arrow
例
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '印刷'}">
  <i class="mdui-icon material-icons">local_printshop</i>
</button>
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '印刷', position: 'top'}">
  <i class="mdui-icon material-icons">local_printshop</i>
</button>
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '印刷', delay: 1000}">
  <i class="mdui-icon material-icons">local_printshop</i>
</button>

JavaScript での呼び出し

コンポーネントのインスタンス化：

// selector は CSS セレクターまたは DOM 要素です
// options は設定パラメータです。以下のパラメータリストを参照してください
var inst = new mdui.Tooltip(selector, options);
実行

パラメータ

パラメータ名タイプデフォルト値説明
positionstringautoツールチップの位置。値の範囲は auto、bottom、top、left、right です。
auto の場合、位置は自動的に判断されます。デフォルトは下です。優先順位は bottom > top > left > right です。
delayint0遅延トリガー（ミリ秒単位）。
contentstringツールチップのコンテンツ。

メソッド

メソッド名説明
open()

ツールチップを開く

設定パラメータを渡すことができます。これにより、開くたびに内容を変更できます。例えば open({ content: 'new content' })。設定パラメータは上記のパラメータリストを参照してください。

close()ツールチップを閉じる
toggle()ツールチップの状態を切り替える
getState()ツールチップの状態を返します。合計 4 つの状態（opening、opened、closing、closed）が含まれます。

イベント

イベント名説明パラメータ
open.mdui.tooltipオープニングアニメーションの開始時にイベントがトリガーされます。event._detail.inst：インスタンス
opened.mdui.tooltipオープニングアニメーションの終了時にイベントがトリガーされます。
close.mdui.tooltipクロージングアニメーションの開始時にイベントがトリガーされます。
closed.mdui.tooltipクロージングアニメーションの終了時にイベントがトリガーされます。
arrow_backPrevious
チップ
arrow_forwardNext
スナックバー