title: bootstrap tooltip/popover on a button not working
body: <p>I am using php to authenticate a user login and I would like to show a popover/tooltip saying "invalid username or password" under the sign in button in case the user/password were invalid.</p>
  
  <p>my php part is working, tested with echo, but I can't make the tooltip to work.</p>
  
  <p>I have included the following import </p>
  
  <pre><code>&lt;script src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>created the following javascript function</p>
  
  <pre><code>$(document).ready(function() {
  function invalid(){
  $('#userNameField').tooltip({
                'selector': '',
                'placement': 'bottom',
                'content' : 'bbbbblblblbl'
              });
  $('#userNameField').tooltip('show');
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>my button has the userNameField id</p>
  
  <pre><code>    &lt;form class="navbar-form pull-right" action="" method="post"&gt;
        &lt;input type="submit" class="btn" id="userNameField" value="Sign in"&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>and my php stops before I am calling the invalid function (I tested this part with an alert("test") and it is working</p>
  
  <pre><code>?&gt;
          &lt;!--Code for invalid username/password combo goes here--&gt;
     &lt;script type="text/javascript"&gt;
      invalid();
      &lt;/script&gt;
  &lt;?php
  </code></pre>
  
  <p>any ideas what am i doing wrong?</p>