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选择器。如果没有这个，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>