Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

Scrolling tool tip in a web page.

Author: DevASP
Download Source Code : 658_Tooltip.zip

This article is about how you can create "scrolling" tool tip in your web page. When you take mouse over some thing say a hyperlink you see a small window having text in it which is moving from right

 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"

else if (document.layers){

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.

Article Comments
Its working fine.....
Thank you.....

Posted on 4/19/2007 6:26:45 AM by VICTOR FERNANDEZ

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< Creating an XP style progress bar in web page.

Disclaimer - Privacy
© 2002-2017 DevASP.net