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

Wijmo.Tooltip

Tooltip クラス

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

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

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

import { Tooltip } from '@mescius/wijmo';
let tt = new Tooltip();
tt.setTooltip('#menu', ‘コマンドを選択します。');
tt.setTooltip('#tree', '階層を探索します。');
tt.setTooltip('#chart', '#idChartTooltip');

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

import { Tooltip } from '@mescius/wijmo';
let tt = new Tooltip();
element.addEventListener('click', () => {
    if (tt.isVisible) {
        tt.hide();
    } else {
        tt.show(element, '重要な要素’);
    }
});

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

デモ

階層

コンストラクタ

プロパティ

メソッド

イベント

コンストラクタ

constructor

  • new Tooltip(options?: any): Tooltip

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

    引数

    • オプション options: any

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

    戻り値 Tooltip

プロパティ

cssClass

cssClass: string

ツールチップに追加するCSSクラス名を取得または設定します。

このプロパティのデフォルト値は空の文字列です。

gap

gap: number

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

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

hideDelay

hideDelay: number

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

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

isAnimated

isAnimated: boolean

ツールチップを表示するときにフェードインアニメーションを使用する かどうかを決定する値を取得または設定します。

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

isContentHtml

isContentHtml: boolean

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

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

isVisible

isVisible: boolean

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

position

position: PopupPosition

オーナ要素に対してツールチップを表示する必要があるPopupPositionを取得または設定します。

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

showAtMouse

showAtMouse: boolean

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

このプロパティのデフォルト値はfalse,です。 これにより、ツールチップの位置がターゲット要素に基づいて計算されます。

positionプロパティは、 ターゲット要素またはマウスの位置に対するツールチップの位置を決定するために 使用されます。

showDelay

showDelay: number

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

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

trigger

trigger: TooltipTrigger

ツールチップをトリガーする方法を決定する TooltipTrigger を取得または設定します。

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

メソッド

dispose

  • dispose(): void

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

    戻り値 void

getTooltip

  • getTooltip(element: any): string | null

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

    引数

    • element: any

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

    戻り値 string | null

    指定した要素に関連付けられたツールチップの内容。

hide

  • hide(): void

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

    戻り値 void

onPopup

setTooltip

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

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

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

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

    引数

    • element: any

      ツールチップが説明する要素、単一要素のCSSセレクターやコントロール。

    • content: string | null

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

    • オプション position: PopupPosition

      オーナ要素に対してツールチップを表示する位置。

    戻り値 void

show

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

    引数

    • element: any

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

    • content: string

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

    • オプション bounds: Rect

      ツールチップが対象とする領域の範囲を定義するオプションのパラメータ。 これを指定しない場合は、要素の範囲が使用されます。

    • オプション position: PopupPosition

      参照範囲に対するツールチップの位置を指定するオプションのパラメータ。 指定した場合、この値はpositionプロパティの設定をオーバーライドします。

    戻り値 void

イベント

popup: Event<Tooltip, TooltipEventArgs>

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

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