Improved simple ToolTips display

By using JS, the display effect of tooltips is improved, and CSS can be further used to beautify the improved tooltips. Front-end layout code:

 <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>

Front-end JS script:

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";
}

Background code:

String STR = ""; datatable dt = new datatable (); // assign values to data tables... three columns: tooltips content column link pointing to address column link display text column for (I = 0; I <DT. rows. count; I ++) {STR + = "<a Title = '" + dt. rows [I] ["tooltips content column"]. tostring () + "'target = '_ blank' href = '#" + dt. rows [I] ["link to address column"]. tostring () + "'class = 'sign' onmouseover = \" this. id = 'mid '; CL () \ ">" + dt. rows [I] ["link display text column"]. tostring () + "</a> <br/>";} info. innerhtml = STR + "<br/>"; DT. dispose ();

Final effect:

　　

 

Improved simple ToolTips display