0

I setup a simple jsfiddle page to display what I am looking to do.

<input title="I want this message to display whatever text is in the input field."></input>

When you hover over the input field then the title is displayed: "I want this message to display whatever text is in the input field."

I want this hover message to display whatever the user has entered into the actual input field.

So if a user has entered https://stackoverflow.com/ into the input field, I want the hover message (title) to display https://stackoverflow.com/

http://jsfiddle.net/FmNg7/

Community
  • 1
  • 1
Azor Ahai
  • 13
  • 3

1 Answers1

2

You could to this with jQuery:

$("input").on("change", function (e) {
   $(e.currentTarget).prop("title", $(e.currentTarget).val());
});

This code snippet binds an eventhandler to the "change" event of all your inputs and then sets the title property of the changed input to its current value.

You could also bind to the keyup event instead of the change event, so the title is immediatley changed while the user types.

morten.c
  • 3,414
  • 5
  • 40
  • 45
  • Thank you both. I managed to get both responses working. I decided to use a combination of both. I was failing to use .prop instead I was trying to use .attr with no luck. – Azor Ahai Jul 28 '14 at 19:07
  • @AzorAhai This depends on the jQuery version you're using, for more details refer to [this SO Q&A](http://stackoverflow.com/questions/5874652/prop-vs-attr) – morten.c Jul 30 '14 at 13:19