And when you take mouse away from the link that window is disappear.
Steps you will do.
Start visual studio and create a new web application.
Open the HTML code of your web page and add the following code just after the start of the body tag.
script type="text/javascript">
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
if (!document.layers&&!document.all)
event="test"
function showtip2(current,e,text){
if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>'
document.all.tooltip2.style.pixelLeft=event.clientX+ietruebody().scrollLeft+10
document.all.tooltip2.style.pixelTop=event.clientY+ietruebody().scrollTop+10
document.all.tooltip2.style.visibility="visible"
else if (document.layers){
document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"
function hidetip2(){
if (document.all)
document.all.tooltip2.style.visibility="hidden"
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"
function scrolltip(){
if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)
document.tooltip2.document.nstip.left-=5
else
document.tooltip2.document.nstip.left=150
</script>
<div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:lightyellow">
<layer name="nstip" width=1000px bgColor="lightyellow"></layer>
</div>
Now in the body of the web page add the following HTML code which will declare some hyperlinks and assign the tool tips to those hyperlinks.
<center>
<a onMouseover="showtip2(this,event,'Visit Devasp for articles and much more!')" onMouseout="hidetip2()" href="http://www.devasp.com">Devasp</a><br>
<a onMouseover="showtip2(this,event,'Visit Yahoo for free mail account!')" onMouseout="hidetip2()" href="http://www.yahoo.com">Yahoo</a><br>
<a onMouseover="showtip2(this,event,'Visit MSN for free mail account and much much more things!')" onMouseout="hidetip2()" href="http://www.msn.com">MSN</a><br>
<a onMouseover="showtip2(this,event,'Visit Google for more space of mail account space !')" onMouseout="hidetip2()" href="http://www.google.com">Google</a><br>
<br>Dont forget to visit devasp
</center>
This is all you will have to done.
Note that this is easily customizable. You can easily set the speed of the tool tip text, its font family, font size, font color and the
background color of the tool tip window.
Run your application and take the mouse over the links you will see the tool tip specified against each link. You can specify this
tool tip on any control.
Posted on 4/19/2007 6:26:45 AM by VICTOR FERNANDEZ