Wednesday, December 29, 2010

Create a javascript ToolTip within 10 minutes for page

Please visit my new Web Site

Sometimes we need to create handy javascript tooltip for client. Here in this article i will show how one can create a javascript tooltip within very short time by using DIV object. To do that here i use a DIV as a tooltip container. When i need to show the tooltip then i have set the DIV visibility style to 'visible' otherwise 'hidden'. Very simple right? Lets start:

Add an Aspx page in your project. Then add the below javascript method:
function DisplayToolTip()
            document.getElementById('divToolTip').style.left = window.event.x;
            document.getElementById('divToolTip') = window.event.y;

            document.getElementById('divToolTip').style.visibility = 'visible';
        function HideToolTip()
            document.getElementById('divToolTip').style.visibility = 'hidden';

Now add the below HTML markup code:
<span id="spanName" style="font-weight: bold;border: solid 2px red;" onmouseover="javascript:DisplayToolTip();"
    onmouseout="javascript:HideToolTip();">THIS IS THE SPAN</span>

    <div id="divToolTip" style="position: absolute; visibility: hidden; z-index: 20;
    background-color: white; border: solid 1px Blue;">This is ToolTip Text</div>

Now run the page hope you will get desired output:
Javascript Tooltip

Please note that this script does not run into mozilla firefox but will work in IE & Opera as well. To do that in easy way download built in jquery tooltip which is available in the internet. This is only a faster development technique for IE developers.


Shawn Frankk said...

Thanks for the code we are Outsourced product development firm. I have personally applied this on my web page and it really works.

James Smith said...

Really a nice tutorial, I would love to try it. Thanks for sharing

James Williams from TechGlobeX

Want to say something?

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash