Tooltipツールチップ

ツールチップは、特定の要素に補足的なテキストヒントやコンテキスト情報を提供し、ユーザーがその要素の機能や目的をよりよく理解できるようにするために使用します。

使用方法

コンポーネントを必要に応じてインポートします：

import 'mdui/components/tooltip.js';

コンポーネントの TypeScript 型を必要に応じてインポートします：

import type { Tooltip } from 'mdui/components/tooltip.js';

使用例：

button

<mdui-tooltip content="Plain tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

例

プレーンテキストツールチップ

デフォルトはプレーンテキストツールチップです。content 属性を使用してツールチップの内容を設定できます。

button

<mdui-tooltip content="Plain tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

ソース

content スロットを使用してツールチップの内容を設定することもできます。

button

title

content

<mdui-tooltip>
  <mdui-button>button</mdui-button>
  <div slot="content">
    <div style="font-size: 1.4em">title</div>
    <div>content</div>
  </div>
</mdui-tooltip>

ソース

リッチテキストツールチップ

variant 属性を rich に設定すると、リッチテキストツールチップを作成できます。headline 属性を使用してツールチップのタイトルを設定し、content 属性を使用してツールチップの内容を設定できます。

button

<mdui-tooltip
  variant="rich"
  headline="Rich tooltip"
  content="Rich tooltips bring attention to a particular element of feature that warrants the user's focus. It supports multiple lines of informational text."
>
  <mdui-button>button</mdui-button>
</mdui-tooltip>

ソース

headline、content スロットを使用してツールチップのタイトルと内容を設定することもできます。action スロットを使用してツールチップのアクションボタンを設定します。

button

Rich tooltip

Rich tooltips bring attention to a particular element of feature that warrants the user's focus. It supports multiple lines of informational text.

Action

<mdui-tooltip variant="rich">
  <mdui-button>button</mdui-button>
  <div slot="headline">Rich tooltip</div>
  <div slot="content">Rich tooltips bring attention to a particular element of feature that warrants the user's focus. It supports multiple lines of informational text.</div>
  <mdui-button slot="action" variant="text">Action</mdui-button>
</mdui-tooltip>

ソース

位置

placement 属性を使用してツールチップの位置を設定できます。

<div class="example-placement">
  <div class="row">
    <mdui-tooltip placement="top-left" content="top-left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-start" content="top-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top" content="top">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-end" content="top-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-right" content="top-right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left-start" content="left-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right-start" content="right-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left" content="left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right" content="right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left-end" content="left-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right-end" content="right-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="bottom-left" content="bottom-left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-start" content="bottom-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom" content="bottom">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-end" content="bottom-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-right" content="bottom-right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
</div>

<style>
.example-placement mdui-card {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0.25rem;
}

.example-placement .row:nth-child(2) mdui-tooltip:last-child mdui-card,
.example-placement .row:nth-child(3) mdui-tooltip:last-child mdui-card,
.example-placement .row:nth-child(4) mdui-tooltip:last-child mdui-card {
  margin-left: 10rem;
}
</style>

ソース

トリガー方法

trigger 属性を使用して、ツールチップのトリガー方法を設定できます。

button

<mdui-tooltip trigger="click" content="tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

ソース

開く/閉じる遅延

トリガー方法が hover の場合、open-delay と close-delay 属性を使用して、それぞれツールチップを開くときと閉じるときの遅延時間をミリ秒単位で設定できます。

button

<mdui-tooltip open-delay="1000" close-delay="1000" content="tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

ソース

無効状態

disabled 属性を追加することで、ツールチップを無効にできます。

button

<mdui-tooltip disabled content="tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

ソース

API

プロパティ

HTML 属性	JavaScript プロパティ	型	デフォルト値
`variant`	`variant`	`'plain' \| 'rich'`	`'plain'`
ツールチップの形状です。既定値は `plain` です。次の値を指定します： `plain`：プレーンテキスト。シンプルな単一行テキストに適しています。 `rich`：リッチテキスト。タイトル、本文、操作ボタンを含めることができます。
`placement`	`placement`	`'auto' \| 'top-left' \| 'top-start' \| 'top' \| 'top-end' \| 'top-right' \| 'bottom-left' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'bottom-right' \| 'left-start' \| 'left' \| 'left-end' \| 'right-start' \| 'right' \| 'right-end'`	`'auto'`
ツールチップの配置位置です。既定値は `auto` です。次の値を指定します： `auto`：位置を自動判断。`variant="plain"` の場合は `top` を優先、`variant="rich"` の場合は `bottom-right` を優先 `top-left`：左上に配置 `top-start`：上、左揃え `top`：上、中央揃え `top-end`：上、右揃え `top-right`：右上に配置 `bottom-left`：左下に配置 `bottom-start`：下、左揃え `bottom`：下、中央揃え `bottom-end`：下、右揃え `bottom-right`：右下に配置 `left-start`：左、上揃え `left`：左、中央揃え `left-end`：左、下揃え `right-start`：右、上揃え `right`：右、中央揃え `right-end`：右、下揃え
`open-delay`	`openDelay`	`number`	`150`
マウスホバーで表示されるまでの遅延時間（ミリ秒単位）です。
`close-delay`	`closeDelay`	`number`	`150`
マウスホバーで非表示になるまでの遅延時間（ミリ秒単位）です。
`headline`	`headline`	`string`	-
ツールチップのタイトルです。`variant="rich"` の場合のみ使用できます。`slot="headline"` で設定することもできます。
`content`	`content`	`string`	-
ツールチップのコンテンツです。`slot="content"` で設定することもできます。
`trigger`	`trigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'hover focus'`
トリガー方法です。スペース区切りで複数の値を指定できます。次の値があります： `click`：クリック時にトリガー `hover`：マウスホバー時にトリガー `focus`：フォーカス時にトリガー `manual`：プログラムからのみツールチップの開閉が可能です。他のトリガー方法と併用できません。
`disabled`	`disabled`	`boolean`	`false`
ツールチップを無効にするかどうかを指定します。
`open`	`open`	`boolean`	`false`
ツールチップを表示するかどうかを指定します。

イベント

名前
`open`
ツールチップが表示を開始したときに発生するイベントです。`event.preventDefault()` を呼び出すことで、ツールチップが開くのを防ぐことができます。
`opened`
ツールチップの表示アニメーションが完了したときに発生するイベントです。
`close`
ツールチップが非表示を開始したときに発生するイベントです。`event.preventDefault()` を呼び出すことで、ツールチップが閉じるのを防ぐことができます。
`closed`
ツールチップの非表示アニメーションが完了したときに発生するイベントです。

Slots

名前
デフォルト
ツールチップのトリガーとなるターゲット要素です。`default` slot内の最初の要素のみがターゲット要素として扱われます。
`headline`
ツールチップのタイトルです。`variant="rich"` の場合のみ、このslotは有効です。
`content`
ツールチップのコンテンツです。HTMLを含めることができます。プレーンテキストのみの場合は、代わりに `content` 属性を使用できます。
`action`
ツールチップ下部のボタンです。`variant="rich"` の場合のみ、このslotは有効です。

CSS Parts

名前
`popup`
ツールチップのコンテナ
`headline`
タイトル
`content`
本文
`action`
操作ボタン

CSS カスタムプロパティ

名前
`--shape-corner-plain`
variant="plain" の場合のコンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
`--shape-corner-rich`
variant="rich" の場合のコンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
`--z-index`
コンポーネントのCSS `z-index` 値

前の章

TextField テキストフィールド

次の章

TopAppBar トップアプリバー