ポップアップで説明表示

HoverMenuExtenderを使います。

AJAX Control Toolkitを導入しましょう。
http://www45.atwiki.jp/lyokun/pages/41.html

つかいかた

• マウスオーバーした時に、ポップアップを表示するコントロールを置きます
  • TextBoxでもImageでもいけます
• ポップアップの内容に相当するコントロールを置きます
  • こっちも概ねなんでも行けるよう ASP:Panelを例に使っている所が多いです
• HoverMenuExtenderを置きます
  • TargetControlIDプロパティには「ポップアップを表示するコントロール」を指定
  • PopupControlIDプロパティには「ポップアップの内容に相当するコントロール」を指定

CSS周り

HoverMenuExtenderにはHoverCssClassというプロパティがあるのですが、
このCSSが適用されるのはポップアップ部分ではなく、TargetControlIDで指定されたコントロールの部分です。

 <asp:Image ID="Image1" runat="server" ImageUrl='1.jpg' />
 <asp:Panel ID="Panel1" runat="server" CssClass="popup">
   ポップアップ！
 </asp:Panel>
 <asp:HoverMenuExtender ID="HoverMenuExtender1" runat="server" PopupControlID="Panel1"
 TargetControlID="Image1" HoverCssClass="hover">
 </asp:HoverMenuExtender>

この例では、Imageをマウスオーバーすると、Panelの中身が表示されます。
HoverCssClassに、

 .hover {
   border: solid 1px #ff0000;
 }

というようなCSSを指定した場合、Imageの周りに1pxの枠線が付きます（マウスオーバー時）。
ポップアップ部分にCSSを指定したい場合は、上記の例ではPanelにCssClassを指定して、そちらで指定することになります。

ポップアップ部分のCSS

ポップアップ部分に関しては、HoverMenuExtenderが自動で隠してくれるようで、
マウスオーバーしない限り、ポップアップ部分が表示されることはないみたいです。

ただし、TargetControlIDで指定したコントロールが出力されていない場合、ポップアップ部分がそのまま表示されます。

上記の例で、たとえば画像を動的に表示して、画像が存在しない場合は非表示にする、というような場合はImageタグが出力されないので、
ポップアップ部分が丸出しになります。

なので、ポップアップ部分のCSSには

.popup {
   display: none;
 }

を指定しておくと良いです。
サンプルでは、visibility: hiddenを指定している場合が多いですが、visibilityは領域が確保されたままになるので、displayのが良さ気です。