ASP.NET AJAX Advance Tips & Tricks（11）三种方法动态创建Tooltip

ASP.NET AJAX Advance Tips & Tricks（11）三种方法动态创建Tooltip2011-10-18 博客园 Lance Zhang前言

如何动态创建提示框（Tooltip）是ASP.NET Forum里的常见问题之一，在做技术支持时，我曾在英文博客上总结过ASP.NET和ASP.NET AJAX环境下如何动态创建提示框的三种常见方法，比较基础，收到了蛮多老外们的commend，如今英文博客被墙，特转到这里来与大家分享。

原文地址：

http://lancezhang.wordpress.com/2008/12/04/create-tooltip-dynamically/

http://lancezhang.wordpress.com/2009/01/12/create-tooltip-dynamically-by-ajax- pagemethod/

http://lancezhang.wordpress.com/2009/01/12/create-tooltip-dynamically-by-ajax-and- webservice/

方法一：使用ICallbackEventHandler

Use Pop up div by JavaScript or AJAX Control Toolkit’s Hover Menu control can create a Tooltip easily.

However, if we need to create the content of tooltip dynamically by the Server-Side code, we can use the ICallbackEventHandler to achieve the faing goal.

Please try the following demo, when you move the mouse on the text, the related image and text which will be created on the code-behind show up in the tooltip after 1 second. during the loading process, a “loading” gif picture will display in the tooltip box.

Ok, here we go:

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=” tooltiptest.aspx.cs” Inherits=”tooltiptest” %>
<！DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head id=“Head1″ runat=“server”>
     <script type=“text/javascript”>
         var positionX;
         var positionY;
         function HandleMouseOver（Label） {
             CallTheServer（Label.innerText, ”）;
             positionX = event.clientX;
             positionY = event.clientY;
             document.getElementById（‘tooltipDiv’）.style.left =  positionX;
             document.getElementById（‘tooltipDiv’）.style.top =  positionY;
             document.getElementById（‘tooltipDiv’）.style.display = ‘block ’;
         }
         function HandleMouseOut（） {
             document.getElementById（‘tooltipDiv’）.style.display = ‘none ’;
             document.getElementById（‘tooltipDiv’）.innerHTML = “<img  src=’loading.gif’/>”;
         }
         function ReceiveServerData（arg, context） {
             document.getElementById（‘tooltipDiv’）.innerHTML = arg;
         }
     </script>
     <style type=“text/css”>
         .style1
         {
             border: 1px solid #96C2F1;
             background-color: #EFF7FF;
             position: absolute;
             display: none;
             filter: alpha（opacity=80）;
             opacity: 0.80;
         }
     </style>
     <title>Untitled Page</title>
</head>
<body style=“font-family: Calibri; font-size: 15px;”>
     <form id=“form1″ runat=“server”>
     <div id=“tooltipDiv” class=“style1″>
     <img src=“loading.gif”/>
     </div>
     <div>
         <asp:Label ID=“Label1″ runat=“server” Text= “http://forums.asp.net/Themes/FAN/style/i/logo.png”
             onmouseout=“HandleMouseOut（）” onmouseover=“HandleMouseOver （this）”></asp:Label>
         <br />
         <br />
         <br />
         <br />
         <asp:Label ID=“Label2″ runat=“server” Text= “http://forums.asp.net/Themes/fan/images/roleicons/a874d69e-0ac8-4b80-acc7-512767e281f6.gif ”
             onmouseout=“HandleMouseOut（）” onmouseover=“HandleMouseOver （this）”></asp:Label>
     </div>
     </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class tooltiptest : System.Web.UI.Page,  System.Web.UI.ICallbackEventHandler
{
     string tooltip;
     public void RaiseCallbackEvent（String eventArgument）
     {
         string filename = eventArgument;
         tooltip = GetTooltip（filename）;
     }
     public string GetCallbackResult（）
     {
         return tooltip;
     }
     protected string GetTooltip（string imagename）
     {
         System.Threading.Thread.Sleep（1000）;
         return @”this is just a demo: <br><img src=’” +  imagename+“‘/>”;
     }
     protected void Page_Load（object sender, EventArgs e）
     {
         String cbReference = Page.ClientScript.GetCallbackEventReference（this,  “arg”, “ReceiveServerData”, “context”）;
         String callbackScript = “function CallTheServer（arg, context） {“  + cbReference + “; }”;
         Page.ClientScript.RegisterClientScriptBlock（this.GetType（）,  “CallTheServer”, callbackScript, true）;
     }
}

首页 / 脚本样式 / Ajax / ASP.NET AJAX Advance Tips & Tricks（11） 三种方法动态创建Tooltip

首页 / 脚本样式 / Ajax / ASP.NET AJAX Advance Tips & Tricks（11）三种方法动态创建Tooltip