Ignite UI™ API ヘルプ

ui.igGridTooltips

igGrid コントロールおよび igHierarchicalGrid コントロールはどちらも、グリッド内のツールチップ機能を備えています。ツールチップは、ユーザーがグリッドセルの上でマウスポインターをホバーすると表示され、設定により期間および可視性のオプションを調整できます。この API のクラス、オプション、イベント、メソッド、およびテーマに関するさらに詳しい情報は上の関連するタブの下で入手可能です。

次のコードスニペットは、igGrid コントロールを初期化する方法を示します。

この API を使用した作業方法の詳細についてはここをクリックしてください。igGrid コントロールの必要なスクリプトおよびテーマを参照する方法については、「Ignite UI で JavaScript リソースを使用する」および Ignite UI のスタイル設定とテーマを参照してください。

コードサンプル

<!doctype html>
<html>
<head>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
          <script src="js/infragistics.lob.js" type="text/javascript"></script>
    <script type="text/javascript">
        var products = [
            { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" },
            { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" },
            { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" },
            { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" },
            { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" },
            { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" },
            { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" },
            { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" },
            { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" }
        ];
 
        $(function () {
            $("#gridTooltips").igGrid({
                columns: [
                    { headerText: "Product ID", key: "ProductID", dataType: "number" },
                    { headerText: "Product Name", key: "Name", dataType: "string" },
                    { headerText: "Product Number", key: "ProductNumber", dataType: "string" }
                ],
                features: [
                    {
                        name: "Tooltips",
                        columnSettings: [
                            { columnKey: "ProductID", allowTooltips: false },
                            { columnKey: "Name", allowTooltips: true },
                            { columnKey: "ProductNumber", allowTooltips: true }
                        ],
                        visibility: "always",
                        showDelay: 1000,
                        hideDelay: 500
                    }
                ],
                width: "500px",
                dataSource: products
            });
        });
    </script>
</head>
<body>
    <table id="gridTooltips"></table>
</body>
</html>

columnSettings

タイプ:: object
デフォルト:: []

特定の列のカスタムツールチップ設定 (ツールチップが有効か無効か) を指定するカスタム列設定のリスト。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Tooltips",
            columnSettings: [
                { columnKey: "Name", allowTooltips: true },
                    { columnKey: "BoxArt", allowTooltips: false }
            ]
        }
    ]
});
 
//Get
var arrayOfColumnSettings = $(".selector").igGridTooltips("option", "columnSettings");

allowTooltips

タイプ:: bool
デフォルト:: true

指定された列でのツールチップを有効または無効にします。デフォルトでは、ツールチップは各列に表示されます。注: このオプションは必須です。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Tooltips",
            columnSettings: [
                { columnKey: "Name", allowTooltips: true },
            ]
        }
    ]
});
 
//Get
var tooltipsSettings = $(".selector").igGridTooltips("option", "columnSettings");
var allowTooltipFirstColumn = tooltipsSettings[0].allowResizing;
 
//Set
//get the array of column settings
var tooltipsSettings = $(".selector").igGridTooltips("option", "columnSettings");
//set new value for the first column
tooltipsSettings[0].allowTooltips = false;
$(".selector").igGridTooltips("option", "columnSettings", tooltipsSettings);

columnIndex

タイプ:: number
デフォルト:: -1

すべての列設定にキーまたはインデックスのどちらかを設定する必要があります。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Tooltips",
            columnSettings: [
                { columnIndex: 0, allowTooltips: true },
            ]
        }
    ]
});

columnKey

タイプ:: string
デフォルト:: null

すべての列設定にキーまたはインデックスのどちらかを設定する必要があります。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Tooltips",
            columnSettings: [
                { columnKey: "Name", allowTooltips: true },
            ]
        }
    ]
});

maxWidth

タイプ:: number
デフォルト:: null

指定した列で表示される場合、ツールチップの最大幅 (ピクセル単位) を指定します。設定されない場合、列の幅は使用されます。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Tooltips",
            columnSettings: [
                { columnKey: "Name", maxWidth: 200 }
            ]
        }
    ]
});

cursorLeftOffset

タイプ:: number
デフォルト:: 10

マウスカーソルに対してツールチップの左の位置を設定します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Tooltips",
            cursorLeftOffset: 30
        }
    ]
});
 
//Get
var accessibility = $(".selector").igGridTooltips("option", "cursorLeftOffset");
 
//Set
$(".selector").igGridTooltips("option", "cursorLeftOffset", 30);

cursorTopOffset

タイプ:: number
デフォルト:: 15

マウスカーソルに対してツールチップの上の位置を設定します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Tooltips",
            cursorTopOffset: 50
        }
    ]
});
 
//Get
var accessibility = $(".selector").igGridTooltips("option", "cursorTopOffset");
 
//Set
$(".selector").igGridTooltips("option", "cursorTopOffset", 50);

fadeTimespan

タイプ:: number
デフォルト:: 150

表示/非表示のときの、ツールチップのフェードインとフェードアウト時間を設定します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Tooltips",
            fadeTimespan: 300
        }
    ]
});
 
//Get
var accessibility = $(".selector").igGridTooltips("option", "fadeTimespan");
 
//Set
$(".selector").igGridTooltips("option", "fadeTimespan", 300);

hideDelay

タイプ:: number
デフォルト:: 300

Type="integer" マウスカーソルがセル以外に移動した後にツールチップが
非表示するまでの時間 (ミリ秒)。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Tooltips",
            hideDelay: 1000
        }
    ]
});
 
//Get
var accessibility = $(".selector").igGridTooltips("option", "hideDelay");
 
//Set
$(".selector").igGridTooltips("option", "hideDelay", 1000);

inherit

タイプ:

bool

デフォルト:

false

子レイアウトで機能継承を有効または無効にします。注: igHierarchicalGrid のみに適用します。

showDelay

タイプ:: number
デフォルト:: 500

マウスカーソルがセルの上にホバーした後にツールチップを
表示するまでの時間 (ミリ秒)。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Tooltips",
            showDelay: 2000
        }
    ]
});
 
//Get
var accessibility = $(".selector").igGridTooltips("option", "showDelay");
 
//Set
$(".selector").igGridTooltips("option", "showDelay", 2000);

style

タイプ:: enumeration
デフォルト:: tooltip

ツールチップのスタイルを設定します。

メンバー

tooltip
タイプ:string
ツールチップはマウスカーソルに基づいて配置されます。ツールチップのコンテンツをプレーンテキストとして描画します。
popover
タイプ:string
ツールチップはターゲット要素に基づいて配置されます。矢印は要素にポイントします。このスタイルはタッチ対応の環境に適切です。ツールチップのコンテンツを HTML として描画します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Tooltips",
            style: "popover"
        }
    ]
});
//Get
var style = $(".selector").igGridTooltips("option", "style");
//Set
$(".selector").igGridTooltips("option", "style", "popover");

visibility

タイプ:: enumeration
デフォルト:: overflow

ツールチップの表示状態オプションを決定します。

メンバー

always
タイプ:string
ツールチップはホバーされる要素で常に表示します。
never
タイプ:string
ツールチップは自動的に表示しません。
overflow
タイプ:string
ツールチップは基データがそのコンテナーをオーバーフローしたときのみ表示します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Tooltips",
            visibility: "always"
        }
    ]
});
//Get
var accessibility = $(".selector").igGridTooltips("option", "visibility");
//Set
$(".selector").igGridTooltips("option", "visibility", "always");

Ignite UI コントロールイベントの詳細については、
Ignite UI でイベントを使用するを参照してください。

注: API メソッドの呼び出しは、API ヘルプに特に記述がない限り、操作に関連するイベントはプログラムによって発生されません。これらのイベントは各ユーザー操作によってのみ呼び出されます。

詳細の表示

tooltipHidden

キャンセル可能:: false

ツールチップが非表示になった後に発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
args
タイプ: Object

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name: "Tooltips",
            tooltipHidden : function(evt, args) {...}
        }
    ]
});
 
//Bind after initialization
$(document).on("iggridtooltipstooltiphidden", ".selector", function (evt, args) {
    //return the triggered event
    evt;
 
    // get a reference to the widget
    args.owner;
 
    // get the string displayed in the tooltip
    args.tooltip;
 
    // get the value of the cell the tooltip was displayed for
    args.value;
 
    // get a reference to the cell the tooltip was displayed for
    args.element;
 
    // get the row index of the cell the tooltip was displayed for
    args.index;
 
    // get the column key of the cell the tooltip was displayed for
    args.columnKey;
 
    // get the column index of the cell the tooltip was displayed for
    args.columnIndex;
} );

tooltipHiding

キャンセル可能:: true

マウスが要素から離れ、ツールチップが非表示になるときに発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
args
タイプ: Object

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name: "Tooltips",
            tooltipHiding : function(evt, args) {...}
        }
    ]
});
//Bind after initialization
$(document).on("iggridtooltipstooltiphidding", ".selector", function (evt, args) {
    //return the triggered event
    evt;
 
    // get a reference to the widget
    args.owner;
 
    // get the string displayed in the tooltip
    args.tooltip;
 
    // get the value of the cell the tooltip was displayed for
    args.value;
 
    // get a reference to the cell the tooltip was displayed for
    args.element;
 
    // get the row index of the cell the tooltip was displayed for
    args.index;
 
    // get the column key of the cell the tooltip was displayed for
    args.columnKey;
 
    // get the column index of the cell the tooltip was displayed for
    args.columnIndex;
} );

tooltipShowing

キャンセル可能:: true

ツールチップを表示するためにマウスが十分な期間要素上をホバーしたときに発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
args
タイプ: Object

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name: "Tooltips",
            tooltipShowing : function(evt, args) {...}
        }
    ]
});
 
//Bind after initialization
$(document).on("iggridtooltipstooltipshowing", ".selector", function (evt, args) {
    //return the triggered event
    evt;
 
    // get a reference to the widget
    args.owner;
 
    // get the string displayed in the tooltip
    args.tooltip;
 
    // get the value of the cell the tooltip was displayed for
    args.value;
 
    // get a reference to the cell the tooltip was displayed for
    args.element;
 
    // get the row index of the cell the tooltip was displayed for
    args.index;
 
    // get the column key of the cell the tooltip was displayed for
    args.columnKey;
 
    // get the column index of the cell the tooltip was displayed for
    args.columnIndex;
} );

tooltipShown

キャンセル可能:: false

ツールチップが表示された後に発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
args
タイプ: Object

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name: "Tooltips",
            tooltipShown : function(evt, args) {...}
        }
    ]
});
 
//Bind after initialization
$(document).on("iggridtooltipstooltipshown", ".selector", function (evt, args) {
    //return the triggered event
    evt;
 
    // get a reference to the widget
    args.owner;
 
    // get the string displayed in the tooltip
    args.tooltip;
 
    // get the value of the cell the tooltip was displayed for
    args.value;
 
    // get a reference to the cell the tooltip was displayed for
    args.element;
 
    // get the row index of the cell the tooltip was displayed for
    args.index;
 
    // get the column key of the cell the tooltip was displayed for
    args.columnKey;
 
    // get the column index of the cell the tooltip was displayed for
    args.columnIndex;
} );

詳細の表示

destroy

.igGridTooltips( "destroy" );
ツールチップウィジェットを破棄します。
コードサンプル

$(".selector").igGridTooltips("destroy");
id

.igGridTooltips( "id" );

返却型:

string
ルーラーとツールチップコンテナーを抑制する親 div 要素の ID を返します。
コードサンプル

$(".selector").igGridTooltips("id");

ui-iggrid-tooltip

ツールチップウィジェットに適用されるクラス。
ui-iggrid-tooltip-content

ツールチップコンテナーに適用されるクラス。

Ignite UI for jQuery | API リファレンス

ui.igGridTooltips

コード サンプル

関連サンプル

関連トピック

依存関係

継承

コードサンプル