Procedure: Follow these steps.
1. Download the java script that i have created for jquery by clicking this link.
2. Pass the reference of this java script in the head section as follows.
<script src="../Scripts/WaterMark.min.js" type="text/javascript"></script>
3. Write following code in the header section of page
<script type="text/javascript">
$(document).ready(function () {
$(':text').WaterMark();
});
</script>
I have used ':text' . This will pick/choose all the asp.net text boxes present in the page and associate the ToolTip attributes as a watermark.
4. Add Tooltip attribute and write whatever you want to show as watermark text for those controls for whom you want to show the watermark.
4. For an example i am including my code. Put them in body section.
<div >
<p class="title">
TextBoxWatermark Demonstration
<br />
<p>
<asp:Label Text="Enter First Name" runat="server" />
<asp:TextBox ID="txtFirstName" Text="" ToolTip="Type your First Name" runat="server"
Width="307px"></asp:TextBox>
</p>
<p>
<asp:Label Text="Enter Last Name" runat="server" />
<asp:TextBox ID="txtLastName" Text="" ToolTip="Type your Last Name" runat="server"
Width="307px"></asp:TextBox>
</p>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</div>
5. Open the page in browser and see the effect.
Demo:
