グリッド ツールチップのスタイル設定 (igGrid)

トピックの概要

目的

このトピックでは、ツールチップ ポップオーバー スタイルを構成する方法を示します。

前提条件

以下の表は、このトピックを理解するための前提条件として必要なトピックを示しています。

• Ignite UI for jQuery コントロールのタッチ サポート: このトピックは、タッチ対話をサポートするために行われた jQuery コントロールの更新を紹介します。

• igGrid™ ツールチップの概要: このトピックは、igGrid ツールチップを有効にして使用する方法を示します。

このトピックの内容

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

• igGrid ツールチップ ポップオーバー スタイル
• ポップオーバー スタイルを設定
• • 概要
  • プロパティ設定
  • 例
• Style プロパティ
• 関連コンテンツ
  • トピック

igGrid ツールチップ ポップオーバー スタイル

以下の表は、 igGrid ツールチップ スタイル プロパティの構成可能な項目を示しています。詳細は、概要表の後に記載されています。

ポップオーバー スタイルを設定

概要

セル上をホバーすると通常のツールチップが表示され、カーソルの右下の角に現れます。しかし、タッチ プラットフォームには、ホバー状態がありません。さらに、ツールチップの一部はユーザーの指で隠れ、別のツールチップを表示する以外非表示にする方法がありません。したがって、タッチ環境では、ポップオーバーという、より自然なツールチップ状態が追加されました。ポップオーバー スタイルをアクティブにすると、クリックまたはタップしたとき現れ、セルの上に表示され、タッチに特化されたレイアウトになります。上に充分な空間がない場合、ポップオーバーは別の位置 (下、左、右の順) に表示されます。タッチしたセルの回りに空間がない場合、ポップオーバーは画面のサイズを超えます。ポップオーバー自体にユーザーがそれを非表示にできるに閉じるボタンがあります。「toolip」スタイルはプレーン テキストとして描画され、「popover」コンテンツは HTML として描画されます。最後に、タップしてホールドしてポップオーバー内のテキストを選択できます。

プロパティ設定

以下の表は、ポップオーバーを有効にするために設定する必要があるプロパティを示します。

例

以下のスクリーンショットは、以下の設定の結果として igGrid ツールチップがどのように見えるかを示しています。

注: 以下の表は、style を popover に設定すると無視されるツールチップ プロパティを示します。理由は、これらがデスクトップ固有でタッチ ブラウザでは機能しないためです。

Style プロパティ

下の表は、ツールチップ機能のスタイル プロパティについて説明し、デフォルト値および推奨値を示しています。

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

• igGrid ツールチップの概要: igGrid ツールチップのプロパティと動作を示すトピック。

• Ignite UI for jQuery コントロールのタッチ サポート: このトピックは、タッチ対話をサポートするために行われた jQuery コントロールの更新を紹介します。