Demo of Horizontal Pointer & Horizontal Tooltip box using JQuery

First Name
Last Name

jQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>

<link rel="stylesheet" href="tooltip.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='pointer.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>

HTML

<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="pointer.gif" /></span> </td></tr>
<tr><td> <br><br>Last Name </td><td><br><br><input type=text id=lname name=lname><span id="d2" class="tool_tip"><img class="pointer" src="pointer.gif" /></span> </td></tr>
<tr><td colspan=2><input type=button id='b1' value=submit></td></tr>
</table>

CSS

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

.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;
}