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