Skip to main content

 

 

 

 
Language:
 
従来のWebアプリにのみ適用されます
 
 
OutSystems

Tooltip

Tooltip UIパターンを使用すると、ユーザーが画面上の要素の上にマウスポインタを重ねたり、要素をクリックしたり、要素をタップしたりしたときに、情報テキストを動的に表示できます。

Tooltip UIパターンの使用方法

  1. Service StudioのツールボックスでTooltipを検索します。

    Tooltipウィジェットが表示されます。

  2. ツールボックスから、Tooltipウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

    デフォルトで、Tooltipウィジェットには[Widget]プレースホルダと[Content]プレースホルダが含まれています。

  3. プレースホルダにコンテンツを追加します。

    この例では、[Widget]プレースホルダに[Save]ボタンを追加し、[Content]プレースホルダに「Save your details」というツールチップテキストを入力しています。

  4. Properties]タブで(オプションの)プロパティを設定し、Tooltipのルックアンドフィールを変更します。

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

プロパティ

プロパティ 説明
Trigger(Trigger Identifier型): オプション コンテンツのトリガータイプを設定します。以下のオプションが事前定義されています。
  • Click
  • Hover
  • Manual

Examples

  • 空白 - マウスポインタを要素の上に重ねるとツールチップがトリガーされます(Entities.Trigger.Hover)。これがデフォルトです。
  • Entities.Trigger.Click - 要素をクリックするとツールチップがトリガーされます。
IsVisible(Boolean型): オプション Trueの場合、ページが最初に読み込まれたときにツールチップが表示されます(最初のトリガーは不要です)。Falseの場合、ツールチップは表示されません。これがデフォルトです。
Position(PositionBase Identifier型): オプション ツールチップの位置を設定します。以下のオプションが事前定義されています。
  • Bottom
  • Left
  • Right
  • Top

  • 空白 - 要素の上にツールチップが表示されます(Entities.PositionBase.Top)。これがデフォルトです。
  • Entities.PositionBase.Right - 要素の右側にツールチップが表示されます。
ExtendedClass(Text型): オプション Tooltip UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるTooltip UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるTooltip UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
AdvancedFormat(Text型): オプション 入力によって提供されるもの以外の追加オプションを使用できます。例: { arrow: false }。詳細については、https://atomiks.github.io/tippyjs/をご覧ください。
  • Was this article helpful?