Demo of Vertical Pointer & Horizontal Tooltip box using JQuery

First Name

Last Name

HTML part including jQuery is here

<script type="text/javascript" src=""> </script>
<link rel="stylesheet" href="tooltip2.css" type="text/css">
$(document).ready(function() {
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
/// 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');

// end of checking two text boxes //

$("#msg").html('Welcome ' + $("#fname").val() + ' ' + $("#lname").val());

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



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

<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>

CSS part

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

position: fixed;
right: 50%;
FONT-SIZE: 12px;
font-family: Verdana;
border-style: solid;
border-width: 1px;
background-color: #f1f1f1;
display: none;

Download the image here ( right click and save )