Bootstrap tooltips not working

Question

I'm going mad here.

I've got the following HTML:

<a href="#" rel="tooltip" title="A nice tooltip">test</a>

And the Bootstrap style tooltip refuses to display, just a normal tooltip.

I've got bootstrap.css working just fine, and I can see the classes in there

I've got all of the relevant JS files at the end of my HTML file:

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>

I've looked at the source of Bootstrap's example and cannot see anything that initiates the tooltip anywhere in there. So I'm guessing it should just work, or am I missing something vital here?

I've got modals and alerts and other things working just fine, so I'm not a total moron ;)

Thanks for any help!

Answer 1

Quick and lighter alternative to Bootstrap tooltip plugin:

HTML:

<div>
    <div class="mytooltip" id="pwdLabel">
        <label class="control-label" for="password">Password</label>

        <div class="mytooltiptext" id="pwdLabel_tttext">
            6 characters long, must include letters and numbers
        </div>                                

    </div>

    <input type="password" name="password" value="" id="password" autocomplete="off"
           class="form-control" 
           style="width:125px" />
</div>

CSS:

<style>
    .mytooltiptext {
        position: absolute;
        left: 0px;
        top: -45px;
        background-color: black;
        color: white;
        border: 1px dashed silver;
        padding:3px;
        font-size: small;
        text-align: center;
    }

    .mytooltip {
        position: relative;
    }

    .mytooltip label {
        border-bottom: 1px dashed black !important;
    }
</style>

JSCRIPT:

$(".mytooltip").mouseover(function(){
    var elm = this.id;
    $("#" + elm + "_tttext").fadeIn("slow");
});

var ttTmo;
$(".mytooltip").mouseout(function(){
    var elm = this.id;
    clearTimeout(ttTmo);
    ttTmo = setTimeout(function(){
        $("#" + elm + "_tttext").fadeOut("slow");
    },3000);
}); 

Label/text must be enclosed in a wrapper of class "mytooltip" This wrapper must have an Id.

After the label there is the tool tip text wrapped in a div of class "mytooltiptext" and id consisting of the id of the parent wrapper + "_tttext". Other options for selectors can be used.

Hope it helps.