Question

I am creating above text box in my JSP file which getting populated in javascript(basically content inside textbox is dynamic not static). I want to display the content of text box when I take mouse over text box. Is there any function in javascript I can use for it?

Answer 1

Use the onmouseover event handler. Modify the input’s text using the value property. You can also use an onmouseout event handler to clear the text when the mouse leaves the input if you need it. See it in this fiddle.

For instance:

 <input id="anId" type="text" 
        onmouseover="this.value=calculateText(this.id)" 
        onmouseout="this.value=''">

Just in case you’d like to do the same thing when the <input> gets/loses the focus (by TAB for instance), use the onfocus and onblur event handlers.

UPDATE It turns out the OP wanted to dynamically change the title attribute of the input, so that it pops up in a tooltip when the mouse hovers over it. This can be achieved adding an onkeyuponinput event handler to the component that sets this.title to this.value. Learn more about oninput here.

<input  type="text" oninput="this.title = this.value">