学步园

        <asp:SqlDataSource
            ID="SqlDataSource1"
            runat="server"
            ConnectionString="<%$ ConnectionStrings:MySqlConnectionString %>"
            ProviderName="System.Data.SqlClient"
            SelectCommand="SELECT * FROM [authors]">
        </asp:SqlDataSource>

    <connectionStrings>

        <add name="MySqlConnectionString" connectionString="Data Source=./sqlexpress;AttachDBFilename=|DataDirectory|pubs.mdf;Integrated Security=True" />

    </connectionStrings>

                    <ItemTemplate>
                        <div>
                            <asp:Label ID="Label1" runat="server" Text='<%# Bind("au_fname") %>'></asp:Label>
                            <div style="display:inline; position:relative;z-index:1000">
                                <img src="images/more.gif" alt="" />
                                <div id="div<%# Eval("au_id") %>" class="tooltip">
                                    <strong>phone</strong>:<%# Eval("phone")%><br />
                                    <strong>address</strong>:<%# Eval("address")%><br />
                                    <strong>city</strong>:<%# Eval("city")%><br />
                                    <strong>state</strong>:<%# Eval("state")%><br />
                                    <strong>zip</strong>:<%# Eval("zip")%><br />
                                    <strong>contract</strong>:<asp:CheckBox ID="CheckBox1"                  Checked='<%#Convert.ToBoolean(Eval("contract").ToString())%>' runat="server" />
                                </div>  
                            </div>                 
                        </div>                        
                    </ItemTemplate>

下一步，我们要利用CSS代码来控制这个div，使其状态在初始时隐藏，当img对象的onmousemove事件发生时显示，onmouseout事件发生时又隐藏。

    下面是CSS代码和Javascript脚本，都很简单。

    <style type="text/css">

        .tooltip

        {

            display: none;

            position: absolute;

            z-index: 1001;

            left: 10px;

            top: 15px;

            width: 170px;

           

            font-size: 0.8em;

            padding: 3px;

            border: dotted 1px;

            background-color: InfoBackground

        }

</style>

 

    <script type="text/javascript">

     function showPanel(divName) {

            var ctl = window.document.getElementById(divName);

            ctl.style.display = 'block';

            ctl.scrollIntoView();

     }

     function hidePanel(divName) {

            var ct2 = window.document.getElementById(divName);

            ct2.style.display = 'none';

     }

    </script>

 

好了，终于完成任务了，看一看实际效果吧。

这里有一个问题就是：

      

   

这样相当难看，请熟悉CSS的朋友给解决一下，谢谢了！

http://www.cnblogs.com/Files/rubyer/SmartToolTip.zip