title: Changing tooltip title using jQuery
body: <p>Help me out, as I am new to jQuery &amp; 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.</p>
  
  <p>For this I used Bootstrap's tooltip .
  What I did was the following :</p>
  
  <p>Downloaded bootstrap js and included in my file like this :</p>
  
  <pre><code> &lt;script type="text/javascript" src="scripts/bootstrap.min.js"&gt;&lt;/script&gt;        
  </code></pre>
  
  <p>Changed my elemnt like this </p>
  
  <pre><code>&lt;input type="text" name="tooltip" id="samplebox" data-toggle="tooltip" title="Ankit" &gt;
  </code></pre>
  
  <p>For Dynamically updating the title, I made use of jQuery</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function(){
          $(" #samplebox ").mouseenter(function(){
              var word = document.getElementById("samplebox").value;
              $(" #samplebox ").attr('title', word);
          });     
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>This works fine for that one element.</p>
  
  <p>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.</p>