javascript - bootstrap tooltip/popover on a button not working -

i using php authenticate user login , show popover/tooltip saying "invalid username or password" under sign in button in case user/password invalid.

my php part working, tested echo, can't make tooltip work.

i have included following import

<script src="bootstrap/js/bootstrap.min.js"></script> <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script> 

created following javascript function

$(document).ready(function() { function invalid(){ $('#usernamefield').tooltip({               'selector': '',               'placement': 'bottom',               'content' : 'bbbbblblblbl'             }); $('#usernamefield').tooltip('show'); } </script> 

my button has usernamefield id

    <form class="navbar-form pull-right" action="" method="post">       <input type="submit" class="btn" id="usernamefield" value="sign in">     </form> 

and php stops before calling invalid function (i tested part alert("test") , working

?>         <!--code invalid username/password combo goes here-->    <script type="text/javascript">     invalid();     </script> <?php 

any ideas doing wrong?

tooltip doesnot have content property instead need use title

demo

doc

   $('#usernamefield').tooltip({               'placement': 'bottom',               'title' : 'bbbbblblblbl'             });  $('#usernamefield').tooltip('show');