Skip to main content

 

パターン

 

 

OutSystems

Tooltip

ユーザーインタラクションに応じて単純な情報コンテンツを動的に表示します。

Tooltipは、エンドユーザーが要素にマウスポインタを重ねたり、フォーカスを合わせたりするか、要素をタップしたときに、情報を提供するテキストを表示するために使用します。Tooltipでは、簡単なテキストを使用して要素を特定したり説明したりできますが、複雑なテキストや操作はサポートされていません。

使用方法

ブロックを画面にドラッグし、コンテンツとツールチップテキストをプレースホルダに追加します。

  1. ツールチップをプレビューにドラッグします。
  2. [Widget]プレースホルダでウィジェットを設定します。
  3. [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

高度なユースケース

ツールチップのアニメーションを変更する

  1. ツールチップをプレビューにドラッグします。
  2. AdvancedFormatパラメータを「{animation: 'perspective' }」に設定します。

  • Was this article helpful?