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