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();
        }
    }

posted @ 2010-11-09 22:18  你妹的sb  阅读(310)  评论(0编辑  收藏  举报
百度一下