Help me out, as I am new to jQuery & web development.
My requirement was to ellipsize(...) the long text in text boxes
and then if mouse is hovered over them display the full text in tooltip.

For this I used Bootstrap's tooltip .
What I did was the following :

Downloaded bootstrap js and included in my file like this :

 <script type=text/javascript src=scripts/bootstrap.min.js></script>        

Changed my elemnt like this

<input type=text name=tooltip id=samplebox data-toggle=tooltip title=Ankit >

For Dynamically updating the title, I made use of jQuery

<script>

    $(document).ready(function(){

        $( #samplebox ).mouseenter(function(){

            var word = document.getElementById(samplebox).value;

            $( #samplebox ).attr('title', word);

        });     

    });

</script>

This works fine for that one element.

now I have to do the same thing for more text-boxes, whose number can keep on increasing. Now, I want to create a generic function where I can pass the id
of that element and get it done for any textbox over which mouse is hovered.