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