Hi iammann,
Please check the below code. I have done up to this. You just need to position the tooltip div respective to the textbox.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.Tooltip
{
background-color: #FFFACD;
border: 1px solid black;
display: block;
padding: 2px 5px 5px 5px;
color: red;
font-size: 8pt;
text-align: center;
height: 50px;
width: 200px;
line-height: 4;
position: relative;
top: -180px;
left: 350px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
$('input[type=text],textarea').on("focus", function () {
if ($(this).val() == "") {
$('[id*=lblErrorMessage]').html($(this)[0].placeholder + " is Required");
$('#dvToolTip').attr('style', 'display: block');
}
else {
$('#dvToolTip').attr('style', 'display: none');
}
});
$('#btnCloseToolTip').click(function () {
$('#dvToolTip').attr('style', 'display: none');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
Name:<span style="color: red;">*</span><br />
<asp:TextBox ID="txtName" CssClass="required" placeholder="Name" runat="server" BackColor="#BCF2FF" />
</div>
<div class="col-md-3">
Subject:<span style="color: red;">*</span><br />
<asp:TextBox ID="txtSubject" CssClass="required" placeholder="Subject" runat="server"
BackColor="#BCF2FF" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
Address:<span style="color: red;">*</span><br />
<asp:TextBox ID="txtAddress" CssClass="required" placeholder="Address" runat="server"
BackColor="#BCF2FF" />
<br />
Phone/Mob:<span style="color: red;">*</span><br />
<asp:TextBox ID="txtPhone" CssClass="required" placeholder="Phone" runat="server"
BackColor="#BCF2FF" />
</div>
<div class="col-md-3">
Message:<span style="color: red;">*</span><br />
<asp:TextBox ID="txtMessage" CssClass="required" placeholder="Message" runat="server"
TextMode="MultiLine" Height="60px" BackColor="#BCF2FF" />
</div>
</div>
</div>
</div>
<br />
<div class="row" align="center">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<asp:Button ID="btnSubmit" Text="Submit" runat="server" CssClass="btn-success" /> <asp:Button
ID="btnReset" Text="Reset" runat="server" CssClass="btn-default" />
</div>
</div>
</div>
</div>
</div>
<br />
<div id="dvToolTip" class="Tooltip" style="display: none;">
<div class="row">
<div class="col-md-12">
<img src="alert.png" style="float: left; display: table-cell; vertical-align: middle;
padding-top: 10px;" />
<asp:Label ID="lblErrorMessage" runat="server" ForeColor="Red" />
<button id="btnCloseToolTip" type='button' class='close' style="color: Black; float: right;
line-height: 0.5;">
x</button>
</div>
</div>
</div>
</form>
</body>
</html>
