Designing a ToolTip using Javascript

Here is the demonstration of this project. Move your mouse over Item A, Item B or Item C. It will display a tip.

Designing this simple tooltip is not so difficult. Using a DIV display on and off, we can show the tip. For that purpose, you need to define a DIV tag which position is absolute and z-index a bit high. Also the DIV display value set to none.

    <div id="tipHolder" style="position: absolute; z-index: 2; display: none;">
        <div id="tipContainer">

Probably you have noticed that another DIV inside the beginning DIV which will be used to display the content. Now lets write the javascript part.

<script type="text/javascript">
var tipTitle=null;        
function show(_this) 
    document.getElementById("tipContainer").innerHTML = tipTitle;
function hide(_this) 
    document.getElementById("tipContainer").innerHTML = "";
function move_layer(event)
 event = event || window.event;
document.onmousemove = move_layer;


Now the only task to apply the dunction "move_layer" in the html code. Where is that? Look at the following code.

<a class="tooltip" onmouseover="show(this)" onmouseout="hide(this)" title="<b>This is an HTML Content</b><hr/>">
Item A</a> <a class="tooltip" onmouseover="show(this)" onmouseout="hide(this)" title="It contains B only">
Item B</a> <a class="tooltip" onmouseover="show(this)" onmouseout="hide(this)" title="Cat, Cow start with C">
Item C</a>

No  Responses to "Designing a ToolTip using Javascript"

Leave a Reply