Demo of Vertical Pointer & Horizontal Tooltip box using JQuery




First Name



Last Name



HTML part including jQuery is here

<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<link rel="stylesheet" href="tooltip2.css" type="text/css">
<script>
$(document).ready(function() {
$("#b1").click(function(event){
var flag='T';// to check the status and display final message box
// Add the pointer image to message boxes ///
$("#d1,#d2").html("<img class='pointer' src='pointer2.gif' />");

if($("#fname").val().length < 1 ){ // if there is no entry for first name
$("#d1").append('Enter First name'); // Add message to tooltip box
$("#d1").show(); // display the tooltip
flag='F'; // set the flag to false
}else{
/// user has enterd its first name
$("#d1").hide(); // hide the tooltip box
}

///start checking second text box //
if($("#lname").val().length < 1 ){
$("#d2").append('Enter Last name');
$("#d2").show();
flag='F';
}else{
$("#d2").hide();
}

// end of checking two text boxes //

if(flag=='T'){
$("#msg").html('Welcome ' + $("#fname").val() + ' ' + $("#lname").val());
$("#msg").show();
}

// hide all the message boxes after time interval ///
setTimeout(function() { $("#d1,#d2,#msg").fadeOut('slow'); }, 4000);

});
});
</script>


</head>

<body >
<div id='msg' class='msg'></div>
<br><br><br>
<table>

<tr><td> First Name </td><td><input type=text id="fname" name=fname><span id="d1" class="tool_tip"><img class="pointer" src="pointer2.gif" /></span> </td></tr>
<tr><td> <br><br><br>Last Name </td><td><br><br><br><input type=text id=lname name=lname><span id="d2" class="tool_tip"><img class="pointer" src="pointer2.gif" /></span> </td></tr>
<tr><td colspan=2><input type=button id='b1' value=submit></td></tr>
</table>

CSS part

.tool_tip{
z-index:10;display:none; padding:7px 10px;
margin-top:32px; margin-left:-60px;
width:180px; line-height:16px;
position:absolute; color:#111;
border:1px solid #DCA; background:#ff7e40;
}
.pointer {z-index:20;position:absolute;top:-12px;border:0;left:20px;}

.msg{
position: fixed;
top:20%;
right: 50%;
FONT-SIZE: 12px;
font-family: Verdana;
border-style: solid;
border-width: 1px;
border-color:red;
padding:10px;
width:350px;
background-color: #f1f1f1;
display: none;
}

Download the image here ( right click and save )