Watermarks in ASP.NET MVC 4

...using the jquery.overlabel plugin

1. Stick a DisplayName attribute for the watermark on your model property

[RequiredIf("Mode", UnderOfferModelMode.SetUnderOffer, ErrorMessage = "Please enter a comment")]

[DisplayName("Please enter your comment text here")]

public string UnderOfferComment { get; set; }

2. Add an Html.LabelFor and an Html.TextAreaFor your model property

3. Import the jquery.overlabel.js by including "overlabel" in your require imports

4. Add a line in the document.ready to call the .overlabel() method on the label selector (or use a class selector as I have)

5. In your css then you just need

label.overlabel {

position: absolute;

margin-left: 70px;

margin-top: 10px;

z-index: 1;

color: #999;

}

And you end up with a lovely little unobtrusive watermark that doesn't interfere with your model validation in anyway.