title: Can I override the title of an input type=text element with javascript?
body: <p>Is there any possibility to override the title of an <code>&lt;input type="text" title="blah" id="name"/&gt;</code> HTML element with js or anything other technology? My goal is to change that title based on an if condition:</p>
  
  <p>I've tried different ways. Some of them would be:</p>
  
  <pre><code>$(document).ready(function(){
      var name = $('#name').val();
      if (name.length &lt; 3) {
          $('#name').prop('title', 'New title');
      }
  });
  </code></pre>
  
  <p>Or</p>
  
  <pre><code>var name = document.getElementById('name');
  if (name.length &lt; 3) {
      document.getElementById('name').title = 'New Title';
  }
  </code></pre>
  
  <p>None worked, until now. Thanks!</p>
  
  <p><strong>LE</strong></p>
  
  <p>This is the full example I use, but still it doesn't work as expected (initially: when the form isn't submitted, the title should be "blah", after the user presses the submit button, if the textbox length is less than 3, then the "New Title" should be displayed)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  
      &lt;script src="//code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container-fluid"&gt;
          &lt;form id="form" method="post"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="name"&gt;Name&lt;/label&gt;
                  &lt;input type="text" id="name" class="form-control" placeholder="Name" title="blah"/&gt;
              &lt;/div&gt;          
              &lt;div class="form-group"&gt;
                  &lt;button type="button" class="btn btn-default"&gt;Go&lt;/button&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $('#form').submit(function(e) {
              if (changeNameTitle())
                  e.preventDefault(); // prevent submitting the form for invalid data
              }
          });
  
          changeNameTitle();
      });
  
      function changeNameTitle()
      {
          if ($('#name').val().length &lt; 3) {
              $('#name').attr('title', 'New title');
              return true;
          }
          return false;
      }
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What I'm doing wrong? I've tested it in Firefox 40.0, and in IE 11.</p>
  
  <p><strong>LE2</strong>
  I finally found the response I want. Is based on Mihai's response (whom I'd like to thank).</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  
      &lt;script src="//code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container-fluid"&gt;
          &lt;form id="form" method="post"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="name"&gt;Name&lt;/label&gt;
                  &lt;input type="text" id="name" class="form-control" placeholder="Name" title="blah"/&gt;
              &lt;/div&gt;          
              &lt;div class="form-group"&gt;
                  &lt;button type="button" class="btn btn-default" onclick="return changeNameTitle();"&gt;Go&lt;/button&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
      function changeNameTitle(){
          if ($('#name').val().length &lt; 3) {
              $('#name').attr('title', 'New title');
              return true;
          } else if ($('#name').val().length &gt;= 3) {
              $('#name').attr('title', 'Ok');
              return true;
          }
          return false;
      }
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>