Bootstrap工具提示没有正确使用Laravel样式

Question

我正在尝试使用Twitter Bootstrap和Laravel 4向我的导航栏添加一些工具提示。但是，似乎Bootstrap CSS没有正确设置工具提示的样式。当我将鼠标悬停在工具提示上时，它会显示一个带有工具提示文本的灰色框，而不是正确的黑框。我在这做错了什么？

{{ HTML::style('css/bootstrap.min.css') }}
{{ HTML::script('js/bootstrap.min.js') }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<nav class="navbar navbar-inverse" role="navigation">
  <div class="container-fluid">
    <div class="navbar-collapse collapse navbar-responsive-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">

        <li> {{ link_to("/personas", '', array('class' => 'glyphicon glyphicon-user', 'id' => 'personas', 'data-toggle' => 'tooltip', 'title' => 'View all personas')) }}</li>
        <li> {{ link_to("/tags", '', array('class' => 'glyphicon glyphicon-tags', 'id' => 'tags', 'data-toggle' => 'tooltip', 'title' => 'View all tags')) }}</li>

      </ul>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<script type="text/javascript">
@('document').ready(function(){

  $('personas').tooltip();
  $('tags').tooltip();

});
</script>

Answer 1

在您的脚本部分中，您缺少 css ID选择器。没有这个，jQuery不知道它是否应该为一个类或一个id搜索。系统会显示一个带有＃的ID，其中包含。

<script type="text/javascript">
$('document').ready(function(){

  $('#personas').tooltip();
  $('#tags').tooltip();

}）;     

Answer 2

在我的app.blade.php文件中，有以下行：

<script src="{{asset('js/app.js')}}" defer></script>

通过仅删除defer，我的工具提示的样式就正确了。

<script src="{{asset('js/app.js')}}"></script>