Bootstrap tooltips not working

Question

I\'m going mad here.

I\'ve got the following HTML:

Answer 1

You must put the tooltip javascript after the html. like this :

<a href="#" rel="tooltip" title="Title Here"> I am Here</a>

<script>
$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

</script> 

Or use $(document).ready :

$(document).ready(function() {

$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

});

</script>

The tooltip not working because you put the tooltip html before the javascript, so they don't know if there is a javascript for the tooltip. In my opinion, the script is read from the top to the bottom.

Answer 2

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.

Answer 3

http://getbootstrap.com/javascript/#tooltips-usage

Opt-in functionality For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning

you must initialize them yourself.

One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:

<script>
$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})
</script>

putting this piece of code in your html allows you to use the tooltips

Examples:

<!-- button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<!-- a tag -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

Answer 4

Tooltip and popover are NOT only-css plugins like dropdown or progressbar. To use tooltips and popover, you MUST to activate them using jquery (read javascript).

So, lets say we want a popover to be shown on click of an html button.

<a href="#" role="button" 
     class="btn popovers-to-be-activated" 
     title="" data-content="And here's some amazing content." 
     data-original-title="A Title" "
>button</a>

Then you need to have following javascript code to activate popover:

$('.popovers-to-be-activated').popover();

Actually, above javascript code will activate popover on all the html elements which have class "popovers-to-be-activated".

Needless to say, put the above javascript inside DOM-ready callback to activate all popovers as soon as DOM is ready:

$(function() {
 // Handler for .ready() called.
 $('.popovers-to-be-activated').popover();
});

Answer 5

I have added jquery and bootstrap-tooltip.js in header. Adding this code in footer works for me! but when i add the same code in header it doesn't work!

<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>

Answer 6

In my particular case, it didn't work because I was including two versions of jQuery. One for bootstrap, but another one (another version) for Google Charts.

When I remove the jQuery loading for the charts, it works fine.