Skip to main content

Tooltip Component Using Java Script & CSS

A simple, small Java Script Component, which you can use to have custom Tooltips on your web page. Well why wait, let get right on to it. First lets see the styles used by the Tooltip popup box.
.toolTipDef, .toolTip { 
            position: absolute; 
            background-color: #ccc; 
            border: 1px solid #000; 
            padding: 3px; 
.toolTipDef { display: none; }
.toolTip { display: block; }
All together we’ve to CSS classes, one ‘toolTipDef’ and ‘toolTip’. ‘toolTipDef’ is used when the tooltip need to be hidden, and when user mouse over the text, we’ll use ‘toolTip’ class to make the tooltip popup visible. These styles set standard attributes like background color for the tooltip popup, its border and text padding inside tooltip popup. ‘toolTipDef’ set the ‘display’ property to ‘none’ so that by default the popup is hidden and ‘toolTip’ sets the ‘display’ property to ‘block’ so that when used the tooltip popup gets displayed.
To display tooltip text, we need a container to be used as popup with the given text for this we need to add the below given empty ‘div’ tag to the HTML page.
<div id="toolTip" class="toolTipDef"></div>
If you observe, the default CSS style class used for this ‘div’ is ‘toolTipDef’ which makes this ‘div’ hidden by default. We need to give some value for the ‘id’ attribute of this container div, so that we can access it using the java script and change its content and CSS styles. Here its given as ‘toolTip’, this value will be used while initializing Tooltip Java Script Component.
The last and core part of this component is the Java Script, lets see what we’ve here.
(function() {
    Tooltip = {
        init: function(elId) {
            if (!elId)
            var el = document.getElementById(elId);
            this.el = el;             this.isIE = document.all? true : false;         }, // End of init()
        showTip: function(anchor, text) {             this.el.innerHTML = text;             this.el.className = "toolTip";
            var pos = this.getElPosition(anchor);
  ['left'] = pos.x + "px";   ['top'] = (pos.y + anchor.offsetHeight - 1) + "px";         }, // End of showTip()
        hideTip: function (anchor) {             this.el.className = "toolTipDef";         }, // End of hideTip()
        getElPosition: function(anchor) {             for(var zx=zy=0; anchor!=null; zx+=anchor.offsetLeft,zy+=anchor.offsetTop,anchor=anchor.offsetParent);             return {x:zx,y:zy}         } // End of getElPosition()     } // End of Tooltip })();
This ‘Tooltip’ Java Script class has 4 methods init, ‘init()’, ‘showTip()’, ‘hideTip()’, and ‘getElPoistion()’. The ‘init()’ method initializes the component, it takes the ‘id’ attribute value of the tooltip popup container ‘div’ element. In this example we’ve given it as ‘toolTip’ as mentioned in the above HTML code. This ‘init()’ method checks the given value, if its not provided returns immediately, otherwise it tries to get the DOM reference of this element. If it fails to get the DOM reference, it returns with out giving any error, otherwise keeps this reference in ‘el’ object of this component.
The ‘getElPosition()’ method is used to get the position of the element on the screen for which the tooltip is being displayed, it takes the element as parameter and uses ‘offsetLeft’, ‘offsetTop’, and ‘offsetParent’ attribute values to give the top, left positions of the given element.
The ‘showTip()’ method is used to display the tool tip popup when user, mouse over an element. This method takes the element and the tool tip text as parameters. It sets the ‘innerHTML’ of the popup container ‘div’ with the given text, and sets the CSS class name of the container ‘div’ to ‘toolTip’ which makes it visible. Then it tries to get the position of the given element by calling ‘getElPosition()’ method, and changes the ‘top’ and ‘left’ CSS style attributes with the values returned by the ‘getElPosition()’ method.
The last method ‘hideTip()’, is used to hide the tool tip popup when user, mouse out from an element. This method takes the element for which the tooltip was displayed. This method simply changes the CSS class name of the given element to ‘toolTipDef’ which hides the tool tip container ‘div’.
The last step is to initialize this component on window ‘onload’ event. You can use the sample code given below OR have your own way of doing it.
window.onload = function () { Tooltip.init('toolTip'); };
Only thing you need to make sure is, the parameter to the ‘init()’ method, it should be the ‘id’ attribute value of the popup container ‘div’.
To show tool tip for a HTML element you call the ‘showTip()’ and ‘hideTip()’ method on ‘mouseover’ and ‘mouseout’ events. Sample code on how to do it is given below
<h2 onmouseover="Tooltip.showTip(this, 'This is a Sample Tooltip');"
    onmouseout="Tooltip.hideTip(this);">Move your mouse on to me!!!</h2>
That is all you need to do, Simple isn’t it!


Popular posts from this blog

Hosting Multiple Domains In Tomcat

Tomcat allows us to host multiple domains in one instance, using multiple 'Host' tags. In this article I will explain how to do it on Tomcat. This is very simple configuration using 'Host' tags in your server.xml. A novice can also understand this configuration very easily.
Before going into the details of the configuration first lets have a look at the 'Host' tag, 'Context' tag and 'Alias' tags first.
<Host name="domain1" appBase="[application base]" autoDeploy="[true/false]" unpackWARs="[true/false]"> <Alias>...</Alias> <Context path="" docBase="" reloadable="[true/false]"/> </Host> First lets have a look at 'Alias' tag. This tag is used to provide aliases for your actual domain. For example you have a domain called '', and you want to run the same application for '' also…

File Uploading Using Servlets, JSP and Commons File Upload API

I’ve seen many developers who are at the early stages of their career have problems with this topic and seen many posts in forums asking how to do it – File Uploading using Servlets, JSP!; this article will provide an example using Commons File Upload API. I tried to make the example as simple as possible, hope it helps those early birds. Example uses JSP to provide the pages with form where user can select the file to upload with other form fields, Commons File Upload API to process submitted form and read form fields separately, and Servlets as middle layer between JSP and Commons File Upload API, example also has ANT build script to generate the distributables. All the code can be downloaded, links to these resources are provided at the end of this post, lets get on with the example then.
The flow in this example is as depicted in the following picture.
As you can see, user selects the file to upload and provides normal form data as well, using "index.jsp" and submits th…

Simple AJAX [, JSP] Example

You will find many examples to learn how AJAX [Asynchronous Java Script And XML] works, but this one is different. Its one of the best way of using AJAX in web applications. The difference -  many of the examples you find uses Java Script to parse the AJAX response, this example avoids that parsing Java Script and uses JSP to generate the HTML and uses simple Java Script just to make the asynchronous call and show the response. It shows simple way of using JSP and AJAX with as much less Java Script as possible. This article wont go into details of what AJAX is and how to make AJAX calls, it explains one good way among many to use AJAX. Lets get on with it then!
The flow of this example is like this – A simple JSP page where user performs an action [button click in this example] to get list of employees, on this action we’ll make an Asynchronous call to a Servlet which will prepare the dummy employee data and sends that data to a JSP page. This JSP generates the HTML displaying the em…