カラフルなツールチップを持つASP.NETアプリケーションの作成

C1ToolTipコントロールを使ったWebアプリケーションの作成 その2

　④ フォントを変更したい場合は「Font Setting」メニューを、コーナーのラウンドを変更したい場合は「Corner Radius」メニューを使用します。ここでは、背景色、枠線、テキストの色を変更しました。

　⑤ 編集が終わったら、「Download theme」ボタンをクリックします。「Download Builder」というページに移動しますので、ページ下部にある「Download」ボタンをクリックします。

　作成したテーマは、「jquery-ui-1.10.3.custom.zip」というファイル名でダウンロードされますので、これを適当なフォルダに入れます（ダウンロードファイル名は常に同じなので、複数のテーマを使う場合は適当にリネームしてダウンロードしてください）。

「Download theme」ボタンをクリック

「Download Builder」ページ下部にある「Download」ボタンをクリック

ダウンロードしたテーマを使う

　テーマをダウンロードしたら、解凍してプロジェクトに組み込み、C1ToolTipコントロールに適用します。

　① プロジェクトを一度閉じ、プロジェクトの中にテーマ用のフォルダを作成します。ここでは、「App_Themes\テーマ1」というフォルダを作成しました。

　② この中に、ダウンロードしたテーマを解凍して格納します。

プロジェクトの中にテーマ用のフォルダを作成しダウンロードしたテーマを解凍して格納する

　③ 「CSS」フォルダを開くと、「custom-theme」というフォルダの中に「jquery-ui-1.10.3.custom.css」というファイルが格納されています。このファイル名を、フォルダ名のパス名と共にC1ToolTipコントロールのThemeプロパティに設定します。

　プロジェクトを開き、C1ToolTipコントロールのThemeプロパティに、次のCSSファイル名を設定します。

• App_Themes\テーマ1\css\custom-theme\jquery-ui-1.10.3.custom.css

　なお、C1ToolTipコントロールのThemeプロパティは、どれか1つ設定するとすべてのC1ToolTipコントロールに適用されます。

ThemeプロパティにCSSファイル名を設定すると、ダウンロードしたテーマが適用される

まとめ

　ツールチップは、単に補足情報や操作説明を表示するだけでも十分その役割を果たしますが、カラフルなデザインやアニメーション効果を工夫すると、使って楽しいWebページに仕上げることが可能です。

　C1ToolTipコントロールでは、ツールチップのデザインにCSSやThemeRollerでデザインを変えることができるので、より視覚効果の高いWebページを完成させることが可能です。