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