改进的简单Tooltips显示

使用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();

//数据表赋值...  三列：Tooltips内容列 链接指向地址列 链接显示文字列



for (i = 0; i < dt.Rows.Count;i++ )

{



    str+= "<a title='" + dt.Rows[i]["Tooltips内容列"].ToString()

    + "' target='_blank' href='#" + dt.Rows[i]["链接指向地址列"].ToString()

    + "' class='sign' onmouseover=\"this.id='mid';cl()\">" 

    + dt.Rows[i]["链接显示文字列"].ToString()+ "</a><br/>";

    

}



info.InnerHtml = str +"<br/><br/>";

dt.Dispose();

最终效果：