[]
【重要】2024年1月公開のアップデート「未適用」のお客様へ デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

Wijmo.Tooltip

Tooltip クラス

ページ上の要素に関する追加情報を表示するポップアップウィンドウを提供します。

Tooltip クラスは以下の2つのモードで使用できます。

自動モード: setTooltip メソッドを使用して、 Tooltip をページの1つ以上の要素に接続します。 Tooltip がイベントを自動的に監視し、 ユーザーがツールチップをトリガーするアクションを実行したときにツールチップを表示します。 次に例を示します。

pre>var tt = new wijmo.Tooltip(); tt.setTooltip('#menu', 'Select commands.'); tt.setTooltip('#tree', 'Explore the hierarchy.'); tt.setTooltip('#chart', '#idChartTooltip');/pre>

手動モード: 呼び出し元がshow メソッドとhide メソッドを 使用してツールチップの表示/非表示を制御します。 次に例を示します。

import { Tooltip } from '@grapecity/wijmo';
var tt = new Tooltip();
element.addEventListener('click', function () {
  if (tt.isVisible) {
    tt.hide();
  } else {
    tt.show(element, 'This is an important element!');
  }
});

次の例は、Tooltip クラスを使用してExcelスタイルのメモを FlexGrid コントロールのセルに追加する方法を示しています。

Example

階層

コンストラクタ

プロパティ

メソッド

イベント

コンストラクタ

constructor

  • new Tooltip(options?: any): Tooltip

  • Tooltip クラスの新しいインスタンスを初期化します。

    引数

    • オプション options: any

      Tooltip の初期化データを含むJavaScriptオブジェクト。

    戻り値 Tooltip

プロパティ

cssClass

cssClass: string

ツールチップを表示するときに使用するCSSクラス名を取得または設定します。

gap

gap: number

ツールチップとターゲット要素との距離を取得または設定します。

このプロパティのデフォルト値は6 ピクセルです。

hideDelay

hideDelay: number

マウスがターゲット要素の上に乗った時、ツールチップが消えるまでの遅延（ミリ秒単位）を取得または設定します。

このプロパティのデフォルト値は ゼロ ミリ秒です。これにより、 マウスが要素から離れるまで、ツールチップが表示されたままになります。

isContentHtml

isContentHtml: boolean

ツールチップのコンテンツをプレーンテキストとして表示するか、HTMLとして表示するかを決定する値を取得または設定します。

このプロパティのデフォルト値はtrueです。

isVisible

isVisible: boolean

ツールチップが表示されているかどうかを示す値を取得します。

showAtMouse

showAtMouse: boolean

ツールチップをターゲット要素ではなくマウスの位置を基準にして配置するかどうかを決定する値を取得または設定します。

このプロパティのデフォルト値はfalseです。

showDelay

showDelay: number

マウスがターゲット要素に入ってからツールチップが表示されるまでの遅延（ミリ秒単位）を取得または設定します。

このプロパティのデフォルト値は500 ミリ秒です。

メソッド

dispose

  • dispose(): void

  • このTooltip インスタンスに関連付けられたすべてのツールチップを削除します。

    戻り値 void

getTooltip

  • getTooltip(element: any): string | null

  • 指定した要素に関連付けられたツールチップの内容を取得します。

    引数

    • element: any

      ツールチップで説明する要素、要素ID、またはコントロール。

    戻り値 string | null

    Tooltip content associated with the given element.

hide

  • hide(): void

  • ツールチップが現在表示されている場合、非表示にします。

    戻り値 void

onPopup

setTooltip

  • setTooltip(element: any, content: string | null): void

  • ページ上の指定した要素にツールチップの内容を割り当てます。

    ページ上の任意の数の要素に対して同じツールチップを 使用して情報を表示できます。要素からツールチップを削除するには、 setTooltip を呼び出して内容をnullに設定します。

    すべての要素のツールチップを削除するには、dispose メソッドを呼び出します。

    引数

    • element: any

      ツールチップで説明する要素、要素ID、またはコントロール。

    • content: string | null

      ツールチップの内容、またはツールチップの内容を含む要素のID。

    戻り値 void

show

  • show(element: any, content: string, bounds?: Rect): void

  • 指定した要素の横に、指定した内容を含むツールチップを表示します。

    引数

    • element: any

      ツールチップで説明する要素、要素ID、またはコントロール。

    • content: string

      ツールチップの内容、またはツールチップの内容を含む要素のID。

    • オプション bounds: Rect

      ツールチップが対象とする領域の範囲を定義するオプションの要素。 これを指定しない場合は、（getBoundingClientRect メソッドによって報告される）要素の範囲が使用されます。

    戻り値 void

イベント

popup: Event<Tooltip, TooltipEventArgs>

ツールチップの内容が表示される前に発生します。

イベントハンドラでイベントパラメーターを変更してツールチップの内容をカスタマイズしたり、ツールチップの表示を抑制したりできます。