使用js簡單改進了Tooltips的顯示效果，可進一步使用CSS對改進的Tooltips進行美化。 前臺布局代碼： <asp:Panel ID="Panel1" runat="server" Height="460px" ScrollBars="Auto" Width="735px"> <div id="info" runat="server" style=" line-height:35px;padding:10px 0 0 10px;" ></div></asp:Panel><div id="show" style="border: thin dashed #808080; z-index: 1; position: absolute;top: 300px; left:120px; line-height:35px; width: 450px; padding:15px 15px 15px 15px; background-color :#FFFF99; visibility:hidden; "> </div>

前臺js腳本：

function cl() {var n = document.getElementById("mid");var s = document.getElementById("show");s.innerText = n.title;var v = new Array();v = document.getElementsByClassName("sign");for (i = 0; i < v.length; i++)v[i].style.color = "Blue";n.style.color = "LimeGreen";for (i = 0; i < v.length; i++)v[i].id = "";s.style.top = window.event.clientY + "px";//s.style.left=(window.event.clientX + 50 )+ "px";s.style.visibility = "visible";
}

后臺代碼：

string str = ""; DataTable dt = new DataTable(); //數(shù)據(jù)表賦值... 三列：Tooltips內(nèi)容列 鏈接指向地址列 鏈接顯示文字列for (i = 0; i < dt.Rows.Count;i++ ) {str+= "<a title='" + dt.Rows[i]["Tooltips內(nèi)容列"].ToString()+ "' target='_blank' href='#" + dt.Rows[i]["鏈接指向地址列"].ToString()+ "' class='sign' οnmοuseοver=\"this.id='mid';cl()\">" + dt.Rows[i]["鏈接顯示文字列"].ToString()+ "</a><br/>";}info.InnerHtml = str +"<br/><br/>"; dt.Dispose();

最終效果：

　　

?

轉(zhuǎn)載于:https://www.cnblogs.com/LFDX/p/3970799.html

總結(jié)

以上是生活随笔為你收集整理的改进的简单Tooltips显示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。