datalist中可以自己布局的tooltip

代碼

 <style type="text/css">

        .tooltip 

        {

            display: none; 

            position: absolute; 

            z-index: 1001; 

            left: 10px;

            top: 15px;

            width: 170px;

            font-family: Trebuchet MS, Lucida Sans Unicode, Arial, Sans-Serif;

            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>

    <asp:DataList ID="DataList1" runat="server">
        <ItemTemplate>
            <tr>
                <td>
                </td>
            </tr>
            <td>
                <div>
                    <asp:Label ID="Label1" runat="server" Text='<%#Eval("sub_plate_name") %>'></asp:Label>
                    <div style="display: inline; position: relative; z-index: 1000">
                        <img src="images/more.gif" alt="" onmouseover="showPanel('div<%# Eval("sub_plate_id") %>');"
                            onmouseout="hidePanel('div<%# Eval("sub_plate_id") %>');" style="z-index: 1000;" />
                        <div id="div<%# Eval("sub_plate_id") %>" class="tooltip">
                            <strong>id</strong>:<%# Eval("sub_plate_name")%><br />
                            <strong>說明</strong>:<%# Eval("sub_plate_description")%><br />
                        </div>
                    </div>
                    <%--    <%#Eval("plate_name") %>--%>
            </td>
            </tr>
        </ItemTemplate>
    </asp:DataList>

 

後台

代碼

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            bind();
        }

    }
    public void bind()
    {
        string sql = "select * from mdsets_bbs_sub_plate";
        DataSet ds = OracleHelper.GetDS(sql);
        this.DataList1.DataSource = ds;
        this.DataList1.DataBind();
    }

  圖片用這個比較好

 

 

 

//GRIDVIEW TOOLTIP提示

 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            DataRowView drv = (DataRowView)e.Row.DataItem;
            for (int i = 1; i < e.Row.Cells.Count; i++)
                e.Row.Cells[i].ToolTip = drv["content"].ToString();
        }
    }