html - Cannot get boostraps jQuery tooltips to appear -

html - Cannot get boostraps jQuery tooltips to appear -

starting frustrated making harder see might going wrong, i'm trying bootstrap's jquery tooltips work upon hovering on image in content of page.

html in body:

<div class="tooltip-demo well"> <a title="tooltip text goes here" rel="tooltip" class="pennant-task" href="#"> <img src="/ssawp/wp-content/themes/wordpress-bootstrap/images/tasks/ytool-boatparts.jpg" /> </a> </div>

header:

<script type="text/javascript"> $('.tooltip-demo.well').tooltip({ selector: "a[rel=tooltip]" }) </script> <script src="bootstrap.js" type="text/javascript"></script>

i've shortened paths create easier browse, sense free check out problem live on:

http://okamistudio.com/ssawp/pennants/

i'm trying accomplish tooltip on little boat icon underneath 'yellow pennant' block of text.

any help or guidance much appreciated.

firstly need include bootstrap.js before write own code. secondly need wrap code in document ready handler.

also, haven't included in example, sake of completeness i've included required jquery.js too. seek this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="bootstrap.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('.tooltip-demo.well').tooltip({ selector: "a[rel=tooltip]" }); }); </script>

jquery html css twitter-bootstrap