bootstrap tooltip/popover on a button not working

Question

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.

my php part is working, tested with echo, but I can't make the tooltip to work.

I have included the following import

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

created the following javascript function

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

my button has the userNameField id

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

and my php stops before I am calling the invalid function (I tested this part with an alert("test") and it is working

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

any ideas what am i doing wrong?

Answer 1

Tooltip doesnot have content property instead you need to use title

Demo

Doc

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

$('#userNameField').tooltip('show');