ShowTable of Contents
概要
XPages Extension Library「Tooltip」の利用方法について記述する。
「Tooltip」とは
「Tooltip」を使うと、画面上の対象項目にフォーカスをあてることで、吹き出しで説明や詳細情報などを表示できる。
対象項目の説明を画面上に表示したくない場合などに便利である。
実現方法
XPage上に 「Tooltip」を実現するにあたり、下記の2つを配置する。
・ツールチップ表示用のコントロール
・「Tooltip」コントロール
1.ツールチップ表示用のコントロールの配置
XPage上でコアコントロールから[ボタン]を表示させたい場所へドラッグする。
追加されたボタンの [プロパティ]-[ボタン]-[名前]と[ラベル]を入力する。
プロパティ名 | 記述内容 |
| 名前 | label1 |
ラベル | ツールチップ表示-基本 |
2.「Tooltip」コントロールの配置
[Extension Library]に含まれる[Tooltip]をドラッグする。
3.ツールチップの内容を記述
[プロパティ] - [すべてのプロパティ] - [基本] - [for] に、ツールチップを表示する対象のコントロールを指定し、
[label]に表示する内容を設定する。
◆設定方法
4.ブラウザで確認
ブラウザで表示した際、「ツールチップ表示-基本」にフォーカスをあてるとツールチップが表示される。
また、フォーカスを外すと消える。
◆ブラウザイメージ（ボタンクリック前）
◆ブラウザイメージ （ボタンクリック後）
実現方法（応用編）
繰り返しコントールにて文書一覧を表示し、フォーカスを当てた個所によってツールチップの内容を切り替える方法を記述する。
適用方法
ビューの列を取得して表示させる方法と文書内のフィールドの値を表示させる方法がある。
1.表示対象のコントロールとして「繰り返し」のコントロールを追加する。
2.ビューの値を表示するための計算結果のコントロールを追加する。
◆表示対象のコントロールの追加
◆設定方法
[ｌａｂｅｌ]に表示したい参照フィールドを指定する。
◆ブラウザイメージ
コントロールの値によって、表示する内容が変わる。
パターンB. 文書のフィールドの値を表示させる
1.表示対象のコントロールとして「繰り返し」のコントロールを追加する。
◆表示対象のコントロールの追加
2.文書のフィールドの値を表示するための計算結果のコントロールを追加する。
◆設定方法
[dynamicContent]をtrueに設定する。
[ソース]に切替え、表示したい内容を直接記載する。
◆ブラウザイメージ
表示する内容が変わる。
◆補足
ラベルの表示位置は、[position]の設定で変更できる。
before･･･前
after･･･後
above･･･上
below･･･下
参考サイト
調査環境
Lotus Domino Designer 8.5.3 Upgrade Pack1
Internet Explorer 8
Google Chrome 19.0.1084.46 m
Mozilla Firefox 12
Safari 5.1.5
この記事は九州地区ノーツパートナー会技術部会(リコー IT ソリューションズ 株式会社)によって作成されました。