バージョン

ツールチップの概要 (igGrid)

トピックの概要

目的

このトピックは、igGrid™ のツールチップ ウィジェットとその主な機能を紹介します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

概要

igGrid では、ツールチップの主な目的はセル全体の内容を表示し、ツールチップ コンテナー内のテキストをユーザーが選択してコピーできるようにすることです (グリッド セルに記入するにはテキストが長すぎる場合などに便利です。下の画像を参照してください)。マウス ポインターを igGrid セルの上に置くと、ツールチップが表示されます。

igGrid のツールチップ機能はツールチップ ウィジェットにより提供されます。機能については、以下の主要機能セクションに示します。

主要機能

以下の表では、ツールチップ ウィジェットの主要機能とそれらを管理するプロパティの概要を説明します。

機能 説明 jQuery プロパティ MVC プロパティ
可視性管理 ツールチップ ウィジェットの動作モード (ツールチップの表示/非表示など) visibility
style
Visibility
Style
構成可能な列 列ごとにツールチップの表示状態を構成できます (列のセルにツールチップを表示させるかどうかなど)。 columnSettings ColumnSettings
アニメーションのタイミング管理 構成可能なツールチップの表示時間と遅延時間 (ミリ秒) とツールチップを表示/非表示するアニメーションの継続時間 showDelay
hideDelay
fadeTimespan
ShowDelay
HideDelay
FadeTimespan
位置のカスタマイズ マウス ポインターからのオフセットとして指定される構成可能なツールチップの表示位置 cursorLeftOffset
cursorTopOffset
CursorLeftOffset
CursorTopOffset
クライアント イベント ツールチップ ウィジェットのライフサイクル中に処理できる特殊なイベント ツールチップの各状態のイベントがあります。
showing
shown
hiding
hidden
tooltipShowing
tooltipShown
tooltipHiding
tooltipHidden
外観 ツールチップのスタイルや位置を設定します。「tooltip」と「popover」の 2 つのモードがあります。
「tooltip」スタイルでは、マウス カーソルに応じてツールチップの位置を決めます (ツールチップがマウス カーソルの隣に表示されます)。ツールチップの内容はプレーンテキストとして表示されます。
「popover」スタイルは、igPopover コントロールのインスタンスを初期化します。矢印で示すターゲット TD 要素に応じてツールチップの位置を決めます。ツールチップの内容は HTML として表示されます。
jQuery UI CSS Framework クラスを変更するすると、外観をカスタマイズできます。
style Style

ツールチップ ウィジェットのプロパティの説明は、jQuery および MVC API ドキュメントを参照してください。

関連トピック

以下は、その他の役立つトピックです。

オンラインで表示: GitHub