why does my Bootstrap javascript not work?

Question

I have looked at the other questons and double checked. My javascript resources are in order, there are no path problems, i even have jquery items working on my page. I thew this code right above the "Social Media Icons" heading for the sake of testing and still nothing.

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

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

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

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


$(document).ready(function () {        

    $('#section-nav a').tooltip();

    $(".tab").tabs();


    $(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *")
      .removeClass("ui-corner-all ui-corner-top")
      .addClass("ui-corner-bottom");

    // move the nav to the bottom
    $(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");

    $('.navbar-toggle').click(function () {
        var target = $('#navigation .shopbar');

        if (target.hasClass('border-bottom')) {
            target.removeClass('border-bottom');
        } else {
            target.addClass('border-bottom');
        }
    });

});

This is just the html, where's the javascript? Tooltips are not automatic in bootstrap, you need to manually call `.tooltip()` — helion3, Feb 04 '14 at 17:45
This post might contain your answer: http://stackoverflow.com/questions/18410922/bootstrap-3-0-popovers-and-tooltips/18537617#18537617 — cssyphus, Feb 04 '14 at 17:50
i have included the javascript and looked over the received answers. they seem to work now but they have no style and i think they are placed pretty weird — morgred, Feb 04 '14 at 18:02

score 3 · Accepted Answer · answered Feb 04 '14 at 17:49

From the Bootstrap docs.. (http://getbootstrap.com/javascript/#tooltips)

"For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself."

So you need to add this jQuery..

$("[data-toggle=tooltip]").tooltip();

To initialize the Tooltips.

score 0 · Answer 2 · answered Feb 04 '14 at 17:50

0

Change data-original-title to title, then:

$('#section-nav a').tooltip();

answered Feb 04 '14 at 17:50

isherwood

58,414
16
114
157

why does my Bootstrap javascript not work?

2 Answers2