Creating Rollover Tip on Web Forms Using JavaScript

 

This tutorial will teach you how to implement the tooltip rollover JavaScript plugin using any custom form that you have. Tooltip rollovers are excellent for providing helpful tips at the very moment it is needed on your website. Additional information can be displayed for images, form field labels, or certain blocks of text to assist visitors on your website.

Any type of HTML container can reveal a rollover when a cursor is placed over it. This includes div, span, etc.This can be achieved by giving an “onmouseover” attribute to containers. Additionally, this attribute lets you specify where the rollover should appear in relation to the container.

You also specify which information should be presented in the rollover itself, which is a very popular way among designers. The following example includes rollovers for an image (img container), form labels (span containers), a form button (input container), and text content in a div container

Rollover Box

Here is an example ofcode for the rollover box div. Only one of these is required within the code on your page, regardless how many boxes your page may contain.

<div
id=”TipBox”
style=”
display:none;
position:absolute;
font-size:12px;
font-weight:bold;
font-family:verdana;
border:#72B0E6 solid 1px;
padding:15px;
color:#1A80DB;
background-color:#FFFFFF;”>
</div>

The rollover box div should have an id attribute and the value must be unique on the page on your site. You may design the rollover box according to your preferences. For example, if you would like to add a style width definition or change the colors. Only two style definitions are required, the display:none and theposition:absolute definitions.

The display:none definition causes the rollover to be hidden, invisible, until the JavaScript (below) causes it to display. The position:absolute definition allows the JavaScript to position the rollover anywhere on your website. Include the rollover box div in the body area of your Pages code somewhere above the first spot where the rollover will be used.

Below is the code for the Tool-tip Plug-in:

<script type = “text/javascript”>
varTipBoxID = “TipBox”;
// No other customizations required
// // // // // // // // // // // //

vartip_box_id;

functionfindPosX(obj)
{
varcurleft = 0;
if(obj.offsetParent)
while(1)
{
curleft += obj.offsetLeft;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.x)
curleft += obj.x;
returncurleft;
}

functionfindPosY(obj)
{
varcurtop = 0;
if(obj.offsetParent)
while(1)
{
curtop += obj.offsetTop;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.y)
curtop += obj.y;
returncurtop;
}

functionDisplayTip(me,offX,offY,content) {
vartipO = me;
tip_box_id = document.getElementById(TipBoxID);
var x = findPosX(me);
var y = findPosY(me);
tip_box_id.style.left = String(parseInt(x + offX) + ‘px’);
tip_box_id.style.top = String(parseInt(y + offY) + ‘px’);
tip_box_id.innerHTML = content;
tip_box_id.style.display = “block”;
tipO.onmouseout = HideTip;
} // function DisplayTip()

functionHideTip() { tip_box_id.style.display = “none”; }
</script>

Remember that when specifying the location of the rollover box,Therollover box is on top of the container with the onmouseoverfunction, the rollover box will flip, rapidly displaying and hiding. This happens when the mouse is in the location within the container where the rollover box is displayed. When the rollover box displays, the mouse is seen as being over the rollover box, not the container, and the JavaScript will sense that the mouse has moved off the container.

Rollover Box
Then, as soon as the rollover is gone and the mouse is over the container again, the JavaScript will display the associated rollover box. The mouse is then again over the rollover box and the whole thing repeats. You can solve this issue by displaying the rollover box in another part of the container with the onmouseoverfunction. Once the rollover box is positioned, it will stay positioned in the container, even if the container is moved to another part of the page.

This post was provided by Spotted Frog Design, a web development and online marketing firm in Philadelphia. For more information about Spotted Frog and their services, please visit http://www.spottedfrogdesign.com

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>