Tooltip
ユーザーインタラクションに応じて単純な情報コンテンツを動的に表示します。
Tooltipは、エンドユーザーが要素にマウスポインタを重ねたり、フォーカスを合わせたりするか、要素をタップしたときに、情報を提供するテキストを表示するために使用します。Tooltipでは、簡単なテキストを使用して要素を特定したり説明したりできますが、複雑なテキストや操作はサポートされていません。
使用方法
ブロックを画面にドラッグし、コンテンツとツールチップテキストをプレースホルダに追加します。
- ツールチップをプレビューにドラッグします。
- [Widget]プレースホルダでウィジェットを設定します。
-
[Content]プレースホルダでコンテンツを設定します。
入力パラメータ
入力名 | 説明 | 型 | 必須 | デフォルト値 |
---|---|---|---|---|
Trigger | コンテンツのトリガーのタイプを設定します。 | Trigger Identifier | False | Entities.Trigger.Hover |
IsVisible | Trueに設定した場合、ページが最初に読み込まれたときにブロックが表示されます(最初のトリガーは不要です)。 | Boolean | False | False |
Position | ウィジェット要素の周囲の位置を設定します。 | PositionBase Identifier | False | Entities.PositionBase.Top |
ExtendedClass | このブロックにカスタムスタイルクラスを追加します。 | Text | False | なし |
AdvancedFormat | 入力パラメータによって提供されるもの以外の追加オプションを使用できます。例: { arrow: false } 詳細については、https://atomiks.github.io/tippyjs/をご覧ください。 |
Text | False | なし |
レイアウトおよびクラス
イベント
イベント名 | 説明 | 必須 |
---|---|---|
OnHide | ツールチップが非表示になるとトリガーされるイベント。 | False |
OnShow | ツールチップが表示されるとトリガーされるイベント。 | False |
高度なユースケース
ツールチップのアニメーションを変更する
- ツールチップをプレビューにドラッグします。
-
AdvancedFormatパラメータを「
{animation: 'perspective' }
」に設定します。