为什么我的Bootstrap javascript不起作用?

时间:2014-02-04 17:43:58

标签: javascript jquery twitter-bootstrap-3

我看过其他的questons并仔细检查过。我的javascript资源是有序的,没有路径问题,我甚至在我的页面上有jquery项目。我把这个代码放在“社交媒体图标”标题的正上方,为了测试而仍然没有。

<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');
        }
    });

});

2 个答案:

答案 0 :(得分:3)

来自Bootstrap文档..(http://getbootstrap.com/javascript/#tooltips

  

“出于性能原因,Tooltip和Popover data-apis是选择加入的,这意味着您必须自己初始化它们。”

所以你需要添加这个jQuery ..

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

初始化工具提示。

答案 1 :(得分:0)

data-original-title更改为title,然后:

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