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">
        </div>
    </div>

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) 
{
    tipTitle=_this.title;
    _this.title="";
    document.getElementById("tipHolder").style.display="inline";
    document.getElementById("tipContainer").innerHTML = tipTitle;
}
function hide(_this) 
{
    document.getElementById("tipHolder").style.display="none";
    document.getElementById("tipContainer").innerHTML = "";
    _this.title=tipTitle;
}
function move_layer(event)
{
 event = event || window.event;
 document.getElementById("tipHolder").style.left=event.clientX+document.body.scrollLeft+10+"px";
 document.getElementById("tipHolder").style.top=event.clientY+document.body.scrollTop+10+"px";
}
document.onmousemove = move_layer;

</script>
    

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