How to manipulate text inside of a <textarea> and use tooltips?

How to manipulate text inside of a <textarea> and use tooltips?

Hi,

I'm pretty new to jquery, so I thought if I stated my problem, someone who knows the library a lot better than me can guide me to which features I need to use to make this work correctly.

I have a grammar check on the server that can grammar check text... big surprise there. It'll return a list of match problems, along with the positions in the text that are flawed. It'll also send the grammar rule that was broken in plain english, to help someone fix it.

So we have a list of these basically:
  1. var grammarError = {
  2.       message: "some error happened",
  3.       fromPosition: 5,
  4.       toPosition: 10
  5. }

What I'd like to do is apply different styles to the text inside of the <textarea> for all these positions (5 to 10 in the case above, but I'm going to have a list of these).

I also want to make it so if a user hovers on top one of these problems, I can show a tooltip that contains the "message" property.

Is this possible? I'm not really sure where to start.