Bootstrap tooltip not working for some reason

Question

Tooltip isn't working idk why but it shows up like this

<script type="text/javascript">
    jQuery(function () {
        $("img[rel='tooltip']").tooltip();
    });
    $("[data-toggle=tooltip]").tooltip();
    </script>
<a href="/forgot" data-toggle="tooltip" data-placement="top" title="forgot login?"><span class="glyphicon glyphicon-question-sign"></span></a>

but not as the black bubble thing

Answer 1

Why is your .tooltip() call outside of your jQuery() function? This will mean the .tooltip() call will execute as soon as that line is parsed by your browser, not when the DOM is loaded. Do this instead:

jQuery(function () {
    $("img[rel='tooltip']").tooltip();
    $("[data-toggle='tooltip']").tooltip();
});

Also, make sure this script is placed AFTER both the jQuery and Bootstrap .js files are loaded.

Edit: Or if you're feeling thrifty, combine your jQuery selectors so you only make one .tooltip() call:

jQuery(function () {
    $("img[rel='tooltip'], [data-toggle='tooltip']").tooltip();
});