Skip to main content

 

 

 

 
Language:

 

 
モバイルアプリとリアクティブWebアプリにのみ適用されます
Service Studioバージョン :
 
 
OutSystems

Tooltip

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

Tooltip UIパターンの使用方法

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

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

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

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

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

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

  4. Properties]タブの[Position]ドロップダウンで、ツールチップを表示する場所を選択します。この例では、[Save]ボタンの上にツールチップが表示されるように設定しています。また、(オプションの)プロパティを設定し、Tooltipのルックアンドフィールを変更することもできます。

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

プロパティ

プロパティ 説明
Position(Position Identifier型): 必須 ツールチップの位置を設定します。以下のオプションが事前定義されています。
  • Bottom
  • BottomLeft
  • BottomRight
  • Center
  • Left
  • Right
  • Top
  • TopLeft
  • TopRight

  • Entities.Position.Right - 要素の右側にツールチップが表示されます。
  • Entities.Position.Bottom - 要素の下にツールチップが表示されます。
IsVisible(Boolean型): オプション Trueの場合、ページが最初に読み込まれたときにツールチップが表示されます(最初のトリガーは不要です)。Falseの場合、ツールチップは表示されません。これがデフォルトです。
IsHover(Boolean型): オプション Trueの場合、マウスポインタを要素の上に重ねるとツールチップがトリガーされます。Falseの場合、マウスポインタを要素の上に重ねてもツールチップはトリガーされません。これがデフォルトです。
ExtendedClass(Text型): オプション Tooltip UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるTooltip UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるTooltip UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
  • Was this article helpful?